我想为我的按钮添加一个弹跳动画。按钮应使用此动画进入屏幕。有用。但在那之后我添加了一个 :active 选择器。
#button:active{
transform: translateX(20px);
}
我不工作。它只是忽略这个选择器。但是我发现在向这个选择器添加一个动画名称之后它就可以工作了。只有这样,但问题是它也会重复我的弹跳动画。它可以是任何名称。甚至是不存在的动画名称。例如:
#button:active{
transform: translateX(20px);
animation-name: not_existing_animation;
}
这就是我需要帮助的原因。我做了一个 fiddle 让你更好地看到我的问题:https://jsfiddle.net/gfd2pjbz/3/
最佳答案
我找到了有关此动画 问题的解决方案。我不知道它是否适合你。但我发现很少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 .
关于jquery - 使用 ':active' 选择器后如何防止调用我的 css 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47476859/