因此,我有一个通过漂亮的动画填充的图形。发生这种情况是因为图形中的每个条都有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/

10-12 12:58
查看更多