Question

第一次单击时，它将显示两个叠加层的动画。但是在第二次点击它时，两个叠加层一下子就会重新开始。

JQUERY

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

Answer 1

考虑到您只有两个overlay容器grey和white。如果您希望transition-delay点击two swoops，则可能需要替换second媒体资源。

$(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属性）

希望这有助于您的案例

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

1 个答案: