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的滑块，但需要处理这个小点。

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我会在这里走出去，并且说'不要＆＃34;，尽管从技术上来说可能是一些奇怪的方式。此外，从超级计算机程序员的角度来看，这违反了关注点的分离（有些人不关心，我知道我知道）以及一件非常奇怪的事情。

话虽这么说，我的rec是在CSS中完成整个事情（即按钮点击添加/切换一个类，触发转换或动画）。通过这种方式，您可以准备好一堆不同的类来为不同的状态或按钮或按钮发出不同的动画。

相反，你可能会非常棒，并且完全放弃了css-animation，只需要在vanilla javascript或者它的小伙伴Jquery中完成整个事情。

您的选择我的朋友，但不要按照您的想法混合和匹配它们，您将不会有美好的时光。

控制CSS动画

1 个答案: