Vue 中如何使用 keyframes 定义动画？

推荐答案

在 Vue 中，你可以通过 @keyframes 定义动画，并将其应用到 Vue 组件的样式中。以下是一个简单的示例：

// www.javascriptcn.com code example
<template>
  <div class="animated-box"></div>
</template>

<style>
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slide-in 1s ease-in-out;
}
</style>

在这个示例中，我们定义了一个名为 slide-in 的 @keyframes 动画，并将其应用到一个 div 元素上。动画效果是从左向右滑动。

本题详细解读

1. 使用 @keyframes 定义动画

@keyframes 是 CSS 中用于定义动画的关键字。你可以通过 from 和 to 关键字来定义动画的起始和结束状态，或者使用百分比来定义动画的中间状态。

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

在这个例子中，slide-in 动画从 translateX(-100%) 开始，到 translateX(0) 结束，即元素从左侧滑入。

2. 将动画应用到元素

定义好动画后，你可以通过 animation 属性将其应用到元素上。animation 属性可以接受多个参数，包括动画名称、持续时间、动画速度曲线等。

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slide-in 1s ease-in-out;
}

在这个例子中，slide-in 动画被应用到一个 div 元素上，动画持续时间为 1 秒，并使用 ease-in-out 速度曲线。

3. 在 Vue 中使用

在 Vue 中，你可以直接在组件的 <style> 标签中定义和使用 @keyframes 动画。这种方式与普通的 CSS 使用方式完全相同，只是它被封装在 Vue 组件的样式中。

// www.javascriptcn.com code example
<template>
  <div class="animated-box"></div>
</template>

<style>
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slide-in 1s ease-in-out;
}
</style>

通过这种方式，你可以在 Vue 组件中轻松地定义和使用 CSS 动画。