当您单击动画循环时，它已经完全起作用，但是按A时如何实现相同的切换效果？相同的开关效果回力和要塞。非常感谢。
看起来您的帖子大部分是代码；请添加更多详细信息。看来您的帖子大部分是代码；请添加更多详细信息。
演示：
https://jsfiddle.net/rihotzu/nywbvxqd/1/#
的HTML
<!doctype <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>sprite test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="default"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js" charset="utf-8"></script>
</html>
CSS：
body {
background-color: black;
margin: 0;
padding: 0;
}
.default{
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(10361px / 11);
height: 210px;
background: url(https://i.imgur.com/sz8vhOh.jpg);
animation: open 0.5s steps(11);
animation-fill-mode: forwards;
animation-play-state: paused;
}
.default2{
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(10361px / 11);
height: 210px;
background: url(https://i.imgur.com/sz8vhOh.jpg);
animation: open 0.5s steps(11);
animation-fill-mode: forwards;
animation-play-state: running;
}
.back{
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(10361px / 11);
height: 210px;
background: url(https://i.imgur.com/sz8vhOh.jpg);
animation: close 0.5s steps(11);
animation-fill-mode: forwards;
animation-play-state: running;
}
@keyframes open
{
from
{
background-position: 0;
}
to
{
background-position: -10361px;
}
}
@keyframes close
{
from
{
background-position: -10361px;
}
to
{
background-position: 0;
}
}
JS：
$('.default').click(function() {
$(this).removeClass('default');
$(this).addClass('default2');
$('.default2').click(function() {
$(this).removeClass('default2');
$(this).addClass('back');
$('.back').click(function() {
$(this).toggleClass('back');
$(this).toggleClass('default2');
});
});
});
最佳答案
我修复了您的CSS和Javascript。我删除了嵌套的click事件，并为click和keyup事件创建了一个函数，以避免重复代码。我还删除了CSS中的一些类名和重复项。
的CSS
body {
background-color: black;
margin: 0;
padding: 0;
}
.default{
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(10361px / 11);
height: 210px;
background: url(https://i.imgur.com/sz8vhOh.jpg);
animation-duration: 0.5s;
animation-timing-function: steps(11);
animation-fill-mode: forwards;
}
.default.open {
animation-name: open;
}
.default.close {
animation-name: close;
}
@keyframes open
{
from
{
background-position: 0;
}
to
{
background-position: -10361px;
}
}
@keyframes close
{
from
{
background-position: -10361px;
}
to
{
background-position: 0;
}
}
Java脚本
function animate() {
if($('.default').hasClass('open')) {
$('.default').removeClass('open');
$('.default').addClass('close');
} else {
$('.default').removeClass('close');
$('.default').addClass('open');
}
}
function animateOnKeyUp(e) {
if(e.key === 'a') {
animate();
}
}
$('.default').click(animate);
$(window).keyup(animateOnKeyUp);
关于javascript - 按键时如何触发动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55084152/