前言

在现代Web开发中，动画和动态效果不仅能够提升用户体验，还能增强网站的视觉吸引力。Vue.js 提供了丰富的工具和API来帮助开发者轻松地集成这些功能。

首先附上截图

1. 淡入淡出动画：平滑过渡

淡入淡出动画是最常见的动画类型之一，它让元素的显示或隐藏过程更加自然。在Vue中，通过<transition>组件和CSS可以轻松实现这种效果。

<template>
  <transition name="fade">
    <div v-if="showFade" class="content">Hello, World!</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showFade: true
    };
  }
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

2. 滑动动画：流畅移动

滑动动画适用于导航菜单、侧边栏或任何需要水平移动的元素。Vue的<transition>组件结合CSS transform属性，可以轻松实现这一效果。

<template>
  <transition name="slide">
    <div v-if="showSlide" class="content">Slide me in!</div>
  </transition>
</template>

<style scoped>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter-from,
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

3. 旋转动画：动态图标

旋转动画对于按钮或图标的激活状态特别有效。使用CSS的animation属性，可以为图标添加旋转效果。

<template>
  <button @click="toggleRotate">
    <i :class="{ 'fa-spin': isRotating }" class="fas fa-spinner"></i>
  </button>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';

export default {
  components: {
    'font-awesome-icon': FontAwesomeIcon,
  },
  data() {
    return {
      isRotating: false,
    };
  },
  methods: {
    toggleRotate() {
      this.isRotating = !this.isRotating;
    },
  },
};
</script>

<style scoped>
.fa-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

4. 自定义动画类：引入第三方库

对于更复杂或专业的动画效果，可以利用第三方动画库，如Animate.css。这些库提供了大量预定义的动画效果，可以轻松地引入Vue项目中。

<template>
  <transition
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut"
  >
    <div v-if="showCustom">Custom animation</div>
  </transition>
</template>

<style scoped>
/* 引入 Animate.css */
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
</style>

5. 过渡动画

处理列表项的过渡时，Vue提供了<transition-group>组件，它允许列表中的每个元素独立地应用过渡效果，非常适合动态加载或更新的列表。

<template>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </transition-group>
</template>

<style scoped>
.list-move {
  transition: transform 0.5s;
}
</style>

附上完整代码

<template>
  <div class="page">
    <div class="card">
      <div class="card__header">
        <h3 class="cart-title">{{ name }}</h3>
        <div class="card-subtitle">Transition & Animation</div>
      </div>
      <div class="card__content">
         <div v-if="isActive" class="emoji">🤡</div>
         </transition>
         </div>  
      <div class="card__action">
        <button type="button" @click="isActive = !isActive;">请按这里</button>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref } from 'vue'

const name = 'wow奶茶';
const isActive = ref(true);

</script>

<style lang="css" scoped>
@import './styles/app.css';
@import './styles/card.css';
@import './styles/animation.css';
</style>

input[type='text'],
textarea,
select {
  padding: 4px 8px;
  margin: 8px 0;
  margin-right: 8px;
  font-size: 16px;
}

label {
  margin-left: 4px;
}
.page {
  padding: 32px;
  margin: 32px;
}

.emoji {
  font-size: 80px;
  transition: 0.5s;
}

.hidden {
  opacity: 0;
  transform: translateX(30px);
}

/*  进入时 */
.v-enter-from {
    opacity: 0;
}
.v-enter-active{
    transition: .3s;
}
.v-enter-to {
    opacity: 1;
}
/*  离开时 */

.v-leave-from {
    opacity: 1;
}
.v-leave-active{
    transition: 1s;
}
.v-leave-to {
    opacity: 0;
}

.slide-enter-from{
    opacity: 0;
    transform: translateX(30px);
}
.slide-enter-active{
    transition: 1s;
}
.slide-enter-to{
    opacity: 1;
    transform: translateX(30px);
}

.slide-leave-from{
    opacity: 1;
}
.slide-leave-active{
    transition: .3s;
}
.slide-leave-to{
    opacity: 0;
    transform: translateX(30px);
}

.pulse-enter-active{
    animation: pulse 1s;
}

.pulse-leave-active{
    animation: pulse 1s;
}

要点

• css transition 切换类名实现
  • css animation
  • 如果要更细致的定制效果，一些内置的类似生命周期的钩子类名 vue 提供了transition 类名 v-if/v-show 切换组件/html片段的效果，动画，内置组件transition 更好的服务于动画定制 .v-enter-from(开始) .v-enter-active(立即激活) .v-enter-to(动画期类名) .v-leave-from(开始) .v-leave-active(立即激活) .v-leave-to(动画期类名)
  • 如果想定制呢？ name="slide" 有没有把vue 文档细致看一次
  • animation 只需要定制enter-active-class 和leave-active-class
  • 上专业的animation.css

    • transition 支持 class 特性 animation-tada enter-active-class leave-active-class

这就是对在html中的动态效果部分展示，涉及transform和animation，希望有所帮助