Question

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

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

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

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

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

Answer 1

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

第一个编码问题。

您还没有完成 W3C 规则。 button是结束tag元素。关闭tag <img />之类的<br />元素并非关闭

第二次编码问题。

我多次测试你的小提琴为什么: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 function，以便将active的{{1}} class移回原来的button {{ 1}}。现在我可以将所有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。更多规范见MDN。

Answer 2

我找到了一个超酷的解决方案。

首先看预览： https://codepen.io/ziruhel/pen/aVjGMY

将初始opacity分隔为一个类，并将此类添加到按钮中。

赞：

<button id="button" class="visibility"/>

和CSS：

.visibility {
  opacity: 0;
}

现在，当按钮为:active时，通过此代码删除动画和您想要的变换：

#button:active {
  transform: translate3d(20px, 0, 0);
  /* transform: translateX(20px); you can also use this */
  animation-name: none; 
}

它现在将转换为正确，但仍然保持弹跳。要删除此弹跳，请执行以下操作：

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

它将删除您在首次加载或初始化时添加的动画。

Answer 3

您可以使用Promise删除弹跳类。还要检查下面代码段中的次要CSS修改。

var p = new Promise(function(resolve, reject) {
  var $timeout = setTimeout(function() {
    document.getElementById("button").classList.add("animated", "bounceInDown");
  }, 1000);
  if ($timeout) {
    resolve($timeout);
  } else {
    reject('Failure!');
  }
});
p.then(function(response) {
  if (response) {
    setTimeout(function() {
      document.getElementById("button").classList.remove("bounceInDown");
      console.log("Yay! finished");
    }, 1900);
  }

}).catch(function() {
  console.log("Something went wrong");
});

#button {
  position: fixed;
  height: 20%;
  width: 20%;
  opacity: 0;
}

button.animated:active,
button.animated:focus {
  transform: translateX(20px);
  background-color: red;
}

.bounceInDown {
  animation-name: bounceInDown;
  opacity: 1!important;
  animation-fill-mode: both;
  animation-duration: 1s;
}

.animated {
  background-color: green;
  opacity: 1!important;
  transition: transform 2s, background-color 1s;
}

@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;
  }
}

<button id="button" />

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

3 个答案: