js怎么调用css的动画效果
时间: 2024-02-09 19:13:12 浏览: 40
要通过 JavaScript 调用 CSS 的动画效果,可以使用 Element.animate() 方法。该方法可以通过 JavaScript 来控制 CSS 动画的播放。
下面是一个例子,假设我们有一个按钮元素,我们想要在点击按钮时触发一个 CSS 动画,可以按照以下步骤进行:
1. 首先,在 CSS 中定义一个动画效果,例如:
```
@keyframes example {
from {transform: translateX(0);}
to {transform: translateX(100px);}
}
```
这里定义了一个简单的动画,将元素从初始位置向右平移 100 像素。
2. 接着,在 JavaScript 中获取该元素,然后调用 animate() 方法:
```
const button = document.querySelector('button');
button.addEventListener('click', () => {
button.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(100px)' }
], {
duration: 1000,
easing: 'ease-out'
});
});
```
这里我们首先获取了一个 `<button>` 元素,然后为其添加了一个点击事件监听器。在监听器中,我们调用了 `button.animate()` 方法,并传入两个参数:
- 第一个参数是一个数组,其中包含动画的两个关键帧,分别是元素的初始状态和结束状态,这里我们使用了之前在 CSS 中定义的动画关键帧。
- 第二个参数是一个对象,用于指定动画的参数,例如动画的持续时间和缓动函数等。
这样,当按钮被点击时,就会触发动画效果,元素会向右平移 100 像素。