Question

所以我有一个图表，通过一个漂亮的动画填写。发生这种情况是因为图中的每个条都具有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选择器中删除了动画属性并添加了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中触发动画会是什么？

Answer 1

你最好的答案可能是在一个类中有动画序列，并使用jQuery来添加类。例如。 CSS

"foo"

然后JS

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

让jquery添加（或触发？）一个动画

1 个答案: