jquery - 使用 ':active' 选择器后如何防止调用我的 css 动画？

Question

我想为我的按钮添加一个弹跳动画。按钮应使用此动画进入屏幕。有用。但在那之后我添加了一个 :active 选择器。

#button:active{
 transform: translateX(20px);
}

我不工作。它只是忽略这个选择器。但是我发现在向这个选择器添加一个动画名称之后它就可以工作了。只有这样，但问题是它也会重复我的弹跳动画。它可以是任何名称。甚至是不存在的动画名称。例如:

#button:active{
 transform: translateX(20px);
 animation-name: not_existing_animation;
}

这就是我需要帮助的原因。我做了一个 fiddle 让你更好地看到我的问题:https://jsfiddle.net/gfd2pjbz/3/

Answer 1

我找到了有关此动画 问题的解决方案。我不知道它是否适合你。但我发现很少coding在你的 Jsfiddle 问题.

第一个编码问题。

您还没有遵守 W3C 规则。 button是收盘tag元素。这不是没有关闭 tag类似 <img /> 的元素<br />等

第二个编码问题。

你得忘了写position方向CSS属性(property)。 position: fixed | absolute | sticky需要设置left | right | top | bottom方向。

我多次测试了你的 fiddle ，为什么不呢 :active pseudo-class在clicked 之后不工作.从您的第一个 animation 中发现的问题. animation和 bounceInDown classes包含 transform属性(property)。你的animation在您删除 animation 之前将无法工作和 bunceInDown classes .所以我需要写一个 function删除那些 classes .

$(function(){
    $('#button').on('click', function(){
        $(this).removeClass('animated bounceInDown');
    });
});

当我删除那些 classes我看到按钮因为 #button 而消失了opacity:是0; .所以我需要 opacity: 1;在 #button .

$(function(){
    $('#button').on('click', function(){
        $(this).addClass('opacity-visible');
    });
});

现在又发现了一个问题。问题在先click :active animation不工作。因为第一个click不允许transform属性(property)直到animation classes被删除。然后需要添加一个class删除那些 animation 时classes .新增后class :active animation将工作。

$(function(){
    $('#button').on('click', function(){
        $(this).addClass('active');
    });
});

现在需要设置一个timeOut function删除 active class对于 button回到原来的地方进行下一步clicked animation .现在我可以写所有 function在一起。

$(function(){
    $('#button').on('click', function(){
    $(this).addClass('active opacity-visible');
    $(this).removeClass('animated bounceInDown');
    setTimeout(function(){
        $('#button').removeClass('active');
    }, 2000);
  });
});

检查了截图。我希望它能帮助您执行最佳解决方案。

setTimeout( function(){
$("#button").addClass("animated bounceInDown");
}, 1000);

$(function(){
	$('#button').on('click', function(){
  	$(this).addClass('active opacity-visible');
    $(this).removeClass('animated bounceInDown');
    setTimeout(function(){
    	$('#button').removeClass('active');
    }, 2000);
  });
});

*:focus{
    outline: none !important;
}
*{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
#button {
  position: fixed;
  background-color: green;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  color: white;
  cursor: pointer;
  height: 20%;
  left: 0;
  width: 20%;
  top: 0;
  opacity: 0;
}

#button:active{
  background-color: red;
  transform: translateX(50%) !important;
 /* animation-name: not_existing_animation; */
}
#button.opacity-visible{
  opacity: 1;
  transition: transform 0.3s ease-in-out 0s;
}
#button.active{
  background-color: black;
  transform: translateX(50%) !important;
}

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */

.bounceInDown {
  animation-name: bounceInDown;
  opacity: 1!important;
}


.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button">Click Me</button>

我建议你不要写:active css对于这种类型的 animation .更多规范请参见 MDN .