如何在点击时切换变换过渡？

Question

https://codepen.io/pen/MoWLrZ

单击第一次时，它将显示两个叠加层的动画。但是，第二次点击它时，两个覆盖图就会一举成立。

JQUERY

$(document).ready(function() { 
    $('#clickThis').click(function(e){ 
    e.preventDefault(); 
    $('.overlay').toggleClass('extend'); 
    }); 
}); 

Answer 1

考虑，你只有两个overlay容器grey和white。 如果您想在second点击two swoops，您可能需要替换其transition-delay属性。

$(document).ready(function() { 
    $('#clickThis').click(function(e) { 
     e.preventDefault(); 
     if ($('.overlay.grey').hasClass('extend') === true) { 
      $('.overlay.grey').css('transition-delay', '0.3s'); 
      $('.overlay.white').css('transition-delay', '0.1s'); 
     } else { 
      $('.overlay.grey').css('transition-delay', '0.1s'); 
      $('.overlay.white').css('transition-delay', '0.3s'); 
     } 
     $('.overlay').toggleClass('extend'); 
    }); 
}); 

这是因为你已经点击#clickThis元素时，white容器是当前container是最后一场演出，因为你已经在你的CSS给定延迟（例如0.3s）组成。

因此，在second点击，将grey容器已经采取影响，但其隐藏在white容器（看看Z-index属性）背后

希望这有助于为你的情况