CSS 动画onclick 和反转下一个onclick
CSS animation onclick and reverse next onclick
我正在使用 spritesheet 和关键帧在单击按钮时为按钮上的图像设置动画。
单击按钮时,我希望帧在一个方向上 运行 并将按钮留在 spritesheet 中的最后一张图像上,再次单击时,我希望相同的帧 [=31] =] 向后,将按钮留在 spritesheet 的第一张图片上。
我目前正在尝试使用 jquery 将按钮上的 class 更改为单击时的动画 class,但这似乎不起作用。
fiddle: http://jsfiddle.net/CGmCe/10295/
JS:
function animate(){
$('.hi').addClass('animate-hi');
}
CSS:
.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
}
.animate-hi {
animation: play 2s steps(10);
}
@keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
创建一个计数器变量来检查按钮是否被点击。
并根据计数器值向元素添加 class 例如:
var counter=0;
$('.btn').on('click',function(){
if(counter=0)
{
$('.hi').addClass('animate-hi');
counter = 1;
}
else
{
counter = 0;
$('.hi').removeClass('animate-hi');
}
});
确保在函数外声明计数器变量。否则每次它的值初始化为0.
确保您使用的是支持动画的浏览器。对我来说,这适用于 Firefox。
以下可能正是您想要的:
http://jsfiddle.net/CGmCe/10299/
代码:
function animateButton() {
var button = $('.hi');
if (button.hasClass('animate-hi')) {
button.removeClass('animate-hi').addClass('animate-hi-reverse');
} else if (button.hasClass('animate-hi-reverse')) {
button.removeClass('animate-hi-reverse').addClass('animate-hi');
} else {
button.addClass('animate-hi');
}
};
$(document).ready(function() {
$('.hi').on("click", function() {
animateButton();
});
});
.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
}
.animate-hi {
animation: play 2s steps(10);
}
.animate-hi-reverse {
animation: play-reverse 2s steps(10);
}
@keyframes play {
from {
background-position: 0px;
}
to {
background-position: -500px;
}
}
@keyframes play-reverse {
from {
background-position: -500px;
}
to {
background-position: 0px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://s.cdpn.io/79/sprite-steps.png" />
<button class="hi" type="button"></button>
我正在使用 spritesheet 和关键帧在单击按钮时为按钮上的图像设置动画。
单击按钮时,我希望帧在一个方向上 运行 并将按钮留在 spritesheet 中的最后一张图像上,再次单击时,我希望相同的帧 [=31] =] 向后,将按钮留在 spritesheet 的第一张图片上。
我目前正在尝试使用 jquery 将按钮上的 class 更改为单击时的动画 class,但这似乎不起作用。
fiddle: http://jsfiddle.net/CGmCe/10295/
JS:
function animate(){
$('.hi').addClass('animate-hi');
}
CSS:
.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
}
.animate-hi {
animation: play 2s steps(10);
}
@keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
创建一个计数器变量来检查按钮是否被点击。 并根据计数器值向元素添加 class 例如:
var counter=0;
$('.btn').on('click',function(){
if(counter=0)
{
$('.hi').addClass('animate-hi');
counter = 1;
}
else
{
counter = 0;
$('.hi').removeClass('animate-hi');
}
});
确保在函数外声明计数器变量。否则每次它的值初始化为0.
确保您使用的是支持动画的浏览器。对我来说,这适用于 Firefox。
以下可能正是您想要的:
http://jsfiddle.net/CGmCe/10299/
代码:
function animateButton() {
var button = $('.hi');
if (button.hasClass('animate-hi')) {
button.removeClass('animate-hi').addClass('animate-hi-reverse');
} else if (button.hasClass('animate-hi-reverse')) {
button.removeClass('animate-hi-reverse').addClass('animate-hi');
} else {
button.addClass('animate-hi');
}
};
$(document).ready(function() {
$('.hi').on("click", function() {
animateButton();
});
});
.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
}
.animate-hi {
animation: play 2s steps(10);
}
.animate-hi-reverse {
animation: play-reverse 2s steps(10);
}
@keyframes play {
from {
background-position: 0px;
}
to {
background-position: -500px;
}
}
@keyframes play-reverse {
from {
background-position: -500px;
}
to {
background-position: 0px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://s.cdpn.io/79/sprite-steps.png" />
<button class="hi" type="button"></button>