css - 如何反转包含 span :nth-child 的 CSS 转换和变换序列

标签 css css-transitions css-transforms

这个 CSS“动画”本质上由 span:nth-children 上的多个转换和变换组成，它们使用转换延迟按顺序相互跟随。一种方法工作得很好，但是反转动画的最佳方法是什么？由于它是一个序列，因此解决方案应该反转整个序列。请参阅 fiddle 例如: http://jsfiddle.net/musicformellons/6nb0wy68/ 

#Pqb-icon {
  background: white;
  width: 170px;
  height: 100px;
  border-radius: 5px;  
  position: relative;
  overflow: hidden;
  border: 2px solid salmon;
  border-bottom: 20;
  -webkit-transition: .9s ease-in-out;
  -moz-transition: .9s ease-in-out;
  -o-transition: .9s ease-in-out;
  transition: .9s ease-in-out;
}

#Pqb-icon span {
  display: block;
  position: absolute;
  border: 5px solid black;
  width: 20px;
  height: 20px;
  bottom: 50px;
  left: 12%;
  background: rgba(255, 200, 220, 0.4);
  transition-timing-function: ease;
}

#Pqb-icon span:nth-child(1) {
  left: 12%;
  border-radius: 25px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#Pqb-icon.open span:nth-child(1) {
  left: 12%;
  border-radius: 25px;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#Pqb-icon.open span:nth-child(3) {
  left: 36%;
  bottom: 50px;
  border-radius: 25px;
  -webkit-transform: translate(-40px,0px);
  -moz-transform: translate(-40px,0px);
  -o-transform: translate(-40px,0px);
  transform: translate(-40px,0px);
  -webkit-transition: .25s ease .7s;
  -moz-transition: .25s ease .7s;
  -o-transition: .25s ease .7s;
  transition: .4s ease .9s;
  opacity: 0;
}

#Pqb-icon span:nth-child(2) {
  width: 5px;    
  height: 38%;
  bottom: 27%;
  background: black;
  border: 0px solid black;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#Pqb-icon.open span:nth-child(2) {
  width: 5px;    
  height: 38%;
  bottom: 27%;
  background: black;
  border: 0px solid black;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease;
}

#Pqb-icon.open span:nth-child(4) {
  width: 5px;    
  height: 38%;
  bottom: 27%;
  left: 15%;
  background: black;
  border: 0px solid black;
  -webkit-transform: rotateZ(-180deg);
  -moz-transform: rotateZ(-180deg);
  -o-transform: rotateZ(-180deg);
  transform: rotate(-180deg) ;
  -webkit-transition: .25s ease-in-out .7s;
  -moz-transition: .25s ease-in-out .7s;
  -o-transition: .25s ease-in-out .65s;
  transition: .4s ease .8s;
  opacity: 0;
}

#Pqb-icon span:nth-child(3) {
  bottom: 27%;
  left: 28.5%;
  border-radius: 25px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#Pqb-icon.open span:nth-child(5) {
  bottom: 27%;
  left: 46%;
  border-radius: 25px;
  -webkit-transform: rotateZ(-180deg);
  -moz-transform: rotateZ(-180deg);
  -o-transform: rotateZ(-180deg);
  transform: rotateZ(-180deg) ;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  -o-transition: .35s ease-in-out;
  transition: .4s ease .4s;
  opacity: 0;
}

#Pqb-icon span:nth-child(4) {
  width: 5px; 
  height: 32%;
  bottom: 10%;
  left: 43%;
  background: black;
  border: 0px solid black;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#Pqb-icon.open span:nth-child(6) {
  width: 5px; 
  height: 32%;
  bottom: 10%;
  left: 46.5%;
  background: black;
  border: 0px solid black;
  -webkit-transform: rotateZ(-180deg);
  -moz-transform: rotateZ(-180dreg);
  -o-transform: rotateZ(-180deg);
  transform: rotateZ(-180deg) ;
  -webkit-transition: .35s ease-in-out .35s;
  -moz-transition: .35s ease-in-out .35s;
  -o-transition: .35s ease-in-out .35s;
  transition: .4s ease .4s;
  opacity: 0;
}

#Pqb-icon span:nth-child(5) {
  bottom: 27%;
  left: 51%;
  border-radius: 25px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#Pqb-icon span:nth-child(6) {
  width: 5px; 
  height: 35%;
  bottom: 40%;
  left: 51%;
  background: black;
  border: 0px solid black;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

最佳答案

由于您只使用了 transition 并且已经有了 toggleClass 方法，因此您不需要更改 JS 中的任何内容来反转过渡效果。您需要做的就是向默认状态添加不同的转换设置(不使用 class='open')，如下面的代码片段。

本质上我们正在做的是:

  • 造成该效果的元素是第三个、第四个、第五个和第六个跨度元素。
  • 最初，对于移出效果，第五和第六个跨度元素会延迟 0.4 秒移出。
  • 第三个和第四个跨度元素延迟 0.8 秒(或 0.9 秒)移出。这有一个额外的延迟，因为它必须在第五个和第六个离开之后才移出。第五和第六个跨度将需要 0.4 秒(过渡持续时间)+ 0.4 秒(过渡延迟)= 0.8 秒才能完成。

  • 在关闭类时，我们需要相反的情况发生。即，第三个和第四个跨度元素应延迟 0.4 秒后移入查看，而第五个和第六个跨度元素应延迟 0.8 秒后移入查看。因此，将适当的transition设置添加到以下选择器就足够了:

    • #Pqb-icon span:nth-child(3) {transition: .4s escape .4s;}
    • #Pqb-icon span:nth-child(4) {transition: .4s escape .4s;}
    • #Pqb-icon span:nth-child(5) {transition: .4s escape .9s;}
    • #Pqb-icon span:nth-child(6) {transition: .4s escape .9s;}

注意:我已经删除了代码片段中的供应商前缀，并添加了前缀库以保持代码较小。

$('#Pqb-icon').on('click', function() {
    $(this).toggleClass('open');
  });
#Pqb-icon {
  background: white;
  width: 170px;
  height: 100px;
  border-radius: 5px;  /*dikte van rondjes*/
  position: relative;
  overflow: hidden;
  border: 2px solid salmon;
  border-bottom: 20;
  transition: .9s ease-in-out;
}
#Pqb-icon span {
  display: block;
  position: absolute;
  border: 5px solid black;
  width: 20px;
  height: 20px;
  bottom: 50px;
  left: 12%;
  background: rgba(255, 200, 220, 0.4);
  transition-timing-function: ease;
}

/* BEFORE collapsed: hamburger */

#Pqb-icon span:nth-child(1) {
  left: 12%;
  border-radius: 25px;
  transition: .25s ease-in-out;
  transform-origin: left center;
}
#Pqb-icon.open span:nth-child(1) {
  left: 12%;
  border-radius: 25px;
}
#Pqb-icon span:nth-child(2) {
  width: 5px;
  height: 38%;
  bottom: 27%;
  background: black;
  border: 0px solid black;
  transition: .25s ease;
  transform-origin: left center;
}
#Pqb-icon.open span:nth-child(2) {
  width: 5px;
  height: 38%;
  bottom: 27%;
  background: black;
  border: 0px solid black;
}
#Pqb-icon span:nth-child(3) {
  bottom: 27%;
  left: 28.5%;
  border-radius: 25px;
  transition: .4s ease .4s;
  transform-origin: left center;
}
#Pqb-icon.open span:nth-child(3) {
  left: 36%;
  bottom: 50px;
  border-radius: 25px;
  transition: .4s ease .9s;
  transform: translate(-40px, 0px);
  opacity: 0;
}
#Pqb-icon span:nth-child(4) {
  width: 5px;
  height: 32%;
  bottom: 10%;
  left: 43%;
  background: black;
  border: 0px solid black;
  transition: .4s ease .4s;
  transform-origin: left center;
}
#Pqb-icon.open span:nth-child(4) {
  width: 5px;
  height: 38%;
  bottom: 27%;
  left: 15%;
  background: black;
  border: 0px solid black;
  transition: .4s ease .9s;
  transform: rotate(-180deg);
  opacity: 0;
}
#Pqb-icon span:nth-child(5) {
  bottom: 27%;
  left: 51%;
  border-radius: 25px;
  transition: .4s ease .9s;
  transform-origin: left center;
}
#Pqb-icon.open span:nth-child(5) {
  bottom: 27%;
  left: 46%;
  border-radius: 25px;
  transition: .4s ease .4s;
  transform: rotateZ(-180deg);
  opacity: 0;
}
#Pqb-icon span:nth-child(6) {
  width: 5px;
  height: 35%;
  bottom: 40%;
  left: 51%;
  background: black;
  border: 0px solid black;
  transition: .4s ease .9s;
  transform-origin: left center;
}
#Pqb-icon.open span:nth-child(6) {
  width: 5px;
  height: 32%;
  bottom: 10%;
  left: 46.5%;
  background: black;
  border: 0px solid black;
  transition: .4s ease .4s;
  transform: rotateZ(-180deg);
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button type="button">
  <span class="sr-only">Toggle navigation</span>
  <div id="Pqb-icon">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </div>
</button>

关于css - 如何反转包含 span :nth-child 的 CSS 转换和变换序列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33471110/

上一篇：css - 响应灵敏的 slider

下一篇：css - 如何让 Laravel Elixir 合并我的文件而不是覆盖它们？

相关文章：

html - 过渡 CSS 持续时间不起作用

javascript - 获取/设置当前@keyframes 百分比/更改关键帧

html - 立方体在它的 Angular 上旋转

javascript - 在 CSS 和 HTML5 中对齐正方形内的四个圆圈

javascript - 图例与 map 上的颜色不对应。融合表

CSS3 动画没有响应

jquery - 在同一元素上使用多重变换 : translate(X, Y)

css - 如何停止在 Microsoft Edge 中的 css 转换闪烁？

css - flex CSS 属性？

html - 如何使用 Flexbox 在 Bootstrap 4 中居中导航栏

©2024 IT工具网  联系我们