Question

我是CSS的新手，但确实了解基础知识，我想使用按钮触发此动画。我无法正常工作。

我在Stackoverflow，Jquery，Jscript中使用了两个示例，但似乎没有一个引用@keyframes。

我看到了更多有关通过类引用动画和删除类的信息（据我所知，通过删除元素重新启动动画）。我尝试将其切换为类。

然后我也想知道什么是最佳实践？

什么是最好的方法？我以为那很简单，但我误会了.....

我有这样的CSS：

#test {
margin-left: 20px;
margin-top: 20px;
width: 50px;
height: 0px;
background: maroon;
position: absolute;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0s;

}
 @keyframes example {
 from { transform: translateY(200px)}
  to {height: 200px; background-color: teal;}
}

Answer 1

我无法重现您用CSS描述的问题。

请参见以下示例：

使用mcve编辑问题后，该答案将被删除。

请注意：

如果您是关于最佳实践的问题，那么对于StackOverflow来说，它就是没有主题的。请参阅我们的how to ask页

$(function() {
  $("#test-btn").on('click', function() {
    $("#test").addClass('animation');
  });
});

.animation {
  margin-left: 20px;
  margin-top: 20px;
  width: 50px;
  height: 0px;
  background: maroon;
  position: absolute;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

@keyframes example {
  from {
    transform: translateY(200px)
  }
  to {
    height: 200px;
    background-color: teal;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="test-btn">Animate</button>
<hr/>
<div id="test"></div>

Answer 2

如果您决定废弃jQuery （或者您必须不使用它） ，以便使用香草JavaScript在#test元素上切换CSS动画，将与动画相关的CSS属性分成一个类：

.animate {
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

然后在.animate元素上切换（添加/删除） #test类：

button.addEventListener('click', function() {
  if (isAnimating) {
    element.classList.remove('animate');
    button.innerHTML = 'Add animation';
  } else {
    element.classList.add('animate');
    button.innerHTML = 'Remove animation';
  }

  isAnimating = !isAnimating;
});

var element = document.getElementById('test');
var button = document.getElementById('toggle');
var isAnimating = false;

button.addEventListener('click', function() {
  if (isAnimating) {
    element.classList.remove('animate');
    button.innerHTML = 'Add animation';
  } else {
    element.classList.add('animate');
    button.innerHTML = 'Remove animation';
  }
  
  isAnimating = !isAnimating;
});

#test {
  margin-left: 20px;
  margin-top: 20px;
  width: 50px;
  height: 0px;
  background: maroon;
  position: absolute;  
}

.animate {
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

#toggle {
  margin-left: 100px;
}

@keyframes example {
  from {
    transform: translateY(200px)
  }
  to {
    height: 200px;
    background-color: teal;
  }
}

<div id="test"></div>
<button id="toggle">Add animation</button>

如何触发CSS动画

2 个答案: