如何反转包含span：nth-​​child的CSS转换和转换序列 [英] How to reverse a sequence of CSS transitions and transforms which contain span:nth-child

问题描述

这个CSS动画本质上由跨度上的几个转换和转换组成：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缓入; 
转换：.25s缓入; 
} 
 
＃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 easy-in-out; 
 -o-transition：.35s easy-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; 
} 
  

解决方案

code> transition 并且已经具有 toggleClass 方法，则不需要更改JS中的任何内容以反转过渡效果。所有你需要做的是添加一个不同的过渡设置为默认状态（不是 class ='open'），如下面的代码片段。

基本上我们正在做的是：

• 引起效果的元素是第三，第四，第五和第六个跨距元素。


• 最初为移出效果，第五和第六个跨距元素延迟了.4s。


• 第三和第四跨距元件以0.8s（或0.9s）的延迟移出。这有一个额外的延迟，因为它必须搬出后，第五和第六个出路。第五和第六个跨度需要0.4s（过渡期）+ 0.4s（过渡延迟）= 0.8s才能完成。



• 在关闭类时，我们需要发生相反。也就是说，第三和第四跨距元件应当以0.4s的延迟移动以观察，而第五和第六跨度应当在0.8s的延迟之后移动。因此，将适当的转换设置添加到以下选择器就足够了：

  
  
  
  
  
  • code>＃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'）;}）;  / pre> 
 ＃Pqb-icon {background：white; width：170px; height：100px; border-radius：5px; / * dikte van rondjes * / position：relative; overflow：hidden;边框：2px鲑鱼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;左：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;过渡：.25s缓入; transform-origin：left center;}＃Pqb-icon.open span：nth-​​child（1）{left：12％; border-radius：25px;}＃Pqb-icon span：nth-​​child（2）{width：5px;身高：38％底部：27％;背景：黑色; border：0px solid black;过渡：.25s缓解; transform-origin：left center;}＃Pqb-icon.open span：nth-​​child（2）{width：5px;身高：38％底部：27％;背景：黑色; border：0px solid black;}＃Pqb-icon span：nth-​​child（3）{bottom：27％;左：28.5％; border-radius：25px;过渡：.4s ease .4s; transform-origin：left center;}＃Pqb-icon.open span：nth-​​child（3）{left：36％; bottom：50px; border-radius：25px;过渡：.4s ease .9s; transform：translate（-40px，0px）; opacity：0;}＃Pqb-icon span：nth-​​child（4）{width：5px;身高：32％;底部：10％;左：43％;背景：黑色; border：0px solid black;过渡：.4s ease .4s; transform-origin：left center;}＃Pqb-icon.open span：nth-​​child（4）{width：5px;身高：38％底部：27％;左：15％;背景：黑色; border：0px solid black;过渡：.4s ease .9s; transform：rotate（-180deg）; opacity：0;}＃Pqb-icon span：nth-​​child（5）{bottom：27％;左：51％; border-radius：25px;过渡：.4s ease .9s; transform-origin：left center;}＃Pqb-icon.open span：nth-​​child（5）{bottom：27％;左：46％; border-radius：25px;过渡：.4s ease .4s; transform：rotateZ（-180deg）; opacity：0;}＃Pqb-icon span：nth-​​child（6）{width：5px;身高：35％底部：40％;左：51％;背景：黑色; border：0px solid black;过渡：.4s ease .9s; transform-origin：left center;}＃Pqb-icon.open span：nth-​​child（6）{width：5px;身高：32％底部：10％;左：46.5％;背景：黑色; border：0px solid black;过渡：.4s ease .4s; transform：rotateZ（-180deg）; opacity：0;}  
 
 < script src = ：//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>切换导航< / 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>  
 

This CSS "animation" in essence consist of several transitions and transforms on span:nth-children which follow each other sequentially using transition delays. It works fine one way, but what is the best way to reverse the animation? Since it is a sequence the solution should reverse the entire sequence. See fiddle for example: 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;
}

解决方案

Since you are only using transition and already have the toggleClass method, you don't need to change anything in the JS to reverse the transition effect. All that you need to do is add a different transition setting to the default state (not with class='open') like the below snippet.

Essentially what we are doing is this:

• The elements that are causing the effect are the third, fourth, fifth and sixth span elements.
• Initially for the move out effect, the fifth and sixth span elements move out with a delay of .4s.
• The third and fourth span elements move out with a delay of 0.8s (or 0.9s). This has an extra delay because it has to move out after the fifth and sixth are out of the way. The fifth and sixth spans will take 0.4s (transition duration) + 0.4s (transition delay) = 0.8s to complete.

• On toggling the class off, we need this to happen in reverse. That is, the third and fourth span elements should move in to view at a delay of 0.4s while the fifth and sixth span should move in after a delay of 0.8s. So adding the appropriate transition settings to the following selectors would be enough:

  • #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;}

Note: I have removed the vendor prefixes in the snippet and added the prefix library to keep the code small.

$('#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转换和转换序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！