javascript - 控制 CSS 动画

Question

有没有办法用javascript完全控制CSS动画？我需要通过单击按钮来更改动画的状态。

@keyframes example {
0% {transform: translate(0,0);}
29% {transform: translate(0,0);}
33% {transform: translate(-100px,0);}
62% {transform: translate(-100px,0);}
66% {transform: translate(-200px,0);}
96% {transform: translate(-200px,0);}
100% {transform: translate(0,0);}}

单击按钮时是否可以将动画状态更改为 50%？

我想用最少的js制作一个 slider ，但需要处理这些小点。

如果没有办法做到这一点，你能告诉我如何用不同的方式做到这一点吗？

#box
{
   width:100px;
   height:100px;
   overflow:hidden;
   position:relative;
}
#all
{
   width:300px;
   height:100px;
   animation-name: example;
   animation-duration: 13.5s;
   animation-iteration-count: infinite;
}
.box1
{
   width:100px;
   height:100px;
   background-color:red;
   float:left;
}
.box2
{
   width:100px;
   height:100px;
   background-color:blue;
   float:left;
}
.box3
{
   width:100px;
   height:100px;
   background-color:green;
   float:left;
}
@keyframes example {
    0% {transform: translate(0,0);}
    29% {transform: translate(0,0);}
    33% {transform: translate(-100px,0);}
    62% {transform: translate(-100px,0);}
    66% {transform: translate(-200px,0);}
    96% {transform: translate(-200px,0);}
    100% {transform: translate(0,0);}
}
@keyframes example2 {
    0% {background-color:black;}
    29% {background-color:black;}
    33% {background-color:white;}
    62% {background-color:white;}
    66% {background-color:white;}
    96% {background-color:white;}
    100% {background-color:black;}
}
@keyframes example3 {
    0% {background-color:white;}
    29% {background-color:white;}
    33% {background-color:black;}
    62% {background-color:black;}
    66% {background-color:white;}
    96% {background-color:white;}
    100% {background-color:white;}
}
@keyframes example4 {
    0% {background-color:white;}
    29% {background-color:white;}
    33% {background-color:white;}
    62% {background-color:white;}
    66% {background-color:black;}
    96% {background-color:black;}
    100% {background-color:white;}
}
.circle
{
   width:10px;
   height:10px;
   background-color:white;
   border-radius:5px;
   float:left;
   margin-left:10px;
}
.circle1
{
   animation-name: example2;
   animation-duration: 13.5s;
   animation-iteration-count: infinite;
}
.circle2
{
   animation-name: example3;
   animation-duration: 13.5s;
   animation-iteration-count: infinite;
}
.circle3
{
   animation-name: example4;
   animation-duration: 13.5s;
   animation-iteration-count: infinite;
}
#circles
{
   position:absolute;
   bottom:10px;
   left:15px;
}
span
{
   color:white;
   margin-top:20px;
   display:block;
   text-align:center;
}

<div id="box">
<div id="all">
<div class="box1"><span>fdsaf</span></div><div class="box2"><span>fdsafd</span></div><div class="box3"><span>fdsafdsaf</span></div>
</div>
<div id="circles"><div class="circle circle1"></div><div class="circle circle2"></div><div class="circle circle3"></div></div>
</div>

Answer 1

我要冒险说“不”，尽管这在技术上可能以某种奇怪的方式可行。另外，从 super Nerd 程序员的 Angular 来看，这违反了关注点分离(有些人不在乎，我知道我知道)，也是一件非常奇怪的事情。

话虽这么说，我的建议是在 CSS 中完成所有操作(即单击按钮添加/切换一个类，从而触发转换或动画)。这样，您就可以准备一堆不同的类来为不同的状态或按钮按下或其他什么触发不同的动画。

相反，你可以完全放弃 css 动画，只用普通的 javascript 或它的小助手 Jquery 来完成整个事情。

你的选择，我的 friend ，但不要按照你的想法混合搭配它们，你不会玩得很开心的。