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

Question

这个 CSS "animation" 本质上由 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;
}

Answer 1

由于您只使用了transition并且已经有了toggleClass方法，因此您无需更改JS中的任何内容即可反转过渡效果。您需要做的就是将不同的转换设置添加到默认状态（而不是 class='open'），就像下面的代码片段一样。

基本上我们正在做的是：

造成影响的元素是第三、第四、第五和第六个跨度元素。
最初是为了移出效果，第五个和第六个跨度元素以0.4秒的延迟移出。
第三个和第四个跨度元素移出，延迟0.8s（或0.9s）。这有一个额外的延迟，因为它必须在第五个和第六个离开后移出。第五个和第六个跨度将需要 0.4s（转换持续时间）+ 0.4s（转换延迟）= 0.8s 才能完成。
在关闭 class 时，我们需要反向进行。也就是说，第三个和第四个跨度元素应该在延迟 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;}

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

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

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

How to reverse a sequence of CSS transitions and transforms which contain span:nth-child

css

css-transitions

css-transforms