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

【问题标题】：How to reverse a sequence of CSS transitions and transforms which contain span:nth-child如何反转包含 span:nth-child 的 CSS 转换和转换序列
【发布时间】：2016-02-01 22:51:09
【问题描述】：

这个 CSS“动画”本质上由 span:nth-children 上的几个过渡和变换组成，它们使用过渡延迟依次跟随彼此。它以一种方式工作正常，但是反转动画的最佳方法是什么？由于它是一个序列，因此解决方案应该反转整个序列。参见小提琴例如： 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;
}

【问题讨论】：

在该代码中看不到任何动画。您是否将过渡和变换误认为动画？
我明白了，我编辑了我的问题来解决这个问题。谢谢。

标签： css css-transitions css-transforms

【解决方案1】：

由于你只使用了transition，并且已经有了toggleClass的方法，所以你不需要在JS中做任何改变来反转过渡效果。您需要做的就是将不同的转换设置添加到默认状态（不是 class='open'），如下面的 sn-p。

基本上我们正在做的是：

导致效果的元素是第三个、第四个、第五个和第六个跨度元素。
最初对于移出效果，第五个和第六个跨度元素以 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 ease .4s;}
- #Pqb-icon span:nth-child(4) {transition: .4s ease .4s;}
- #Pqb-icon span:nth-child(5) {transition: .4s ease .9s;}
- #Pqb-icon span:nth-child(6) {transition: .4s ease .9s;}

注意：我已经删除了 sn-p 中的供应商前缀并添加了前缀库以保持代码小。

$('#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>

【讨论】：

太棒了！谢谢！有什么建议可以让 P 在过渡期间保持“在一起”（它现在分成 2 个组件......）？
你的意思是q和b（因为P不动）？可以通过一些调整来实现，让我检查一下。
@musicformellons：这需要大量的返工（比如在中间添加额外的 div）。它比我第一眼看到的要复杂一些。我可以为您尝试，但由于我正忙于其他工作，这需要时间。
@musicformellons: Here 是一个小提琴样本。您可以进一步对其进行自定义以满足您的需求。
太好了，我会拼凑起来的！非常感谢！