因此,我有一个通过漂亮的动画填充的图形。发生这种情况是因为图形中的每个条都有css属性animation: slide-left 0.9s ease-in-out 1s both;
动画如下所示:
@keyframes slide-left {
0% {
-webkit-transform: translateX(-200%);
}
70% {
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0);
}
}
现在,我不太擅长使用javascript,但我希望这种情况发生在单击按钮时(并且将图形隐藏到单击按钮之前),而不是在页面加载时发生。
现在,我从css-selector中删除了动画属性,并添加了
translateX(-200%);
意识到,如果我通过
animation: slide-left 0.9s ease-in-out 1s both;
添加inspect element
,则正是我想要的。所以我找到了一个看起来像这样的“解决方案”:
$("#button").on('click', show_function);
function show_function() {
$(".graph").fadeIn("slow");
$('<style>.bar-container>* { animation: slide-left 1s ease-in-out 1s both; }</style>').prependTo('body');
}
感觉“笨拙”,加载几乎需要一秒钟。所以我想知道有什么更好的方法来使函数触发javascript / JQuery中的动画?
最佳答案
最好的答案可能是在类中包含动画序列,并使用jQuery添加类。例如。
的CSS
@keyframes slide-left {
0% {
-webkit-transform: translateX(-200%);
}
70% {
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0);
}
}
.slide-it {
animation: slide-left 0.9s ease-in-out 1s both;
}
然后是JS
$("#button").on('click', show_function);
function show_function() {
$(".graph").fadeIn("slow");
$('.bar-container').addClass('slide-it');
}
关于javascript - 有jQuery添加(或触发?)动画,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46183710/