如何在使用':active'选择器后阻止调用我的css动画？

Question

我想在我的按钮上添加一个弹跳动画.按钮应该使用此动画进入屏幕.有用.但之后我添加了一个:主动选择器.

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

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

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

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

Answer 1

我找到了关于这个动画问题的解决方案.我不知道它对你有用吗 但我coding在你的Jsfiddle中发现了一些问题.

第一个编码问题.

您尚未遵守W3C规则.button是一个结束tag元素.这不是关闭tag元素<img /> <br />等等.

第二个编码问题.

你必须忘记写position方向CSS属性.position: fixed | absolute | sticky需要设定left | right | top | bottom方向.

我多次测试你的小提琴,为什么:active pseudo-class不工作clicked.从你的第一个发现问题animation.animation并bounceInDown classes包含该transform属性.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属性直到animation classes被删除.然后class在删除它们时需要添加一个animation classes.添加新class的:active animation后将工作.

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

现在需要设置一个timeOut functionfor for for active classfor buttonback to original place for next 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的更多规范.