精读Vue官方文档-认识 Vue 过渡机制，熟练运用 CSS/JavaScript 演示

前端

2023-10-07 10:18:42

认识Vue过渡机制

Vue.js 作为前端开发领域的冉冉之星，以其简便、高效的特点，吸引了无数忠实的追随者。它内置了一套出色的过渡系统，方便我们为元素的变更（新增、删除、更改）应用过渡效果，使其在视觉上更具动态感和吸引力。

入场与退出动画

在Vue中，过渡动画主要分为两种类型：入场动画和退出动画。顾名思义，入场动画是在元素被添加到DOM时所应用的动画效果，而退出动画则相反，是在元素从DOM中移除时所触发的动画。

CSS 与 JavaScript

Vue的过渡系统既可以兼容纯粹的CSS过渡，又允许我们使用JavaScript来自定义动画行为。这使得我们能够以更为灵活的方式创建动画效果，从而进一步提升界面的交互性和用户体验。

实践与应用

现在，让我们通过一些具体实例，来深入探索 Vue 过渡机制的妙用。我们将使用 CSS 和 JavaScript 来演示如何为不同场景下的元素变化添加入场和退出动画。

案例一：CSS过渡

在这个案例中，我们创建一个简单的 todo 列表，并在新任务添加或从列表中删除时，使用CSS过渡来为任务项添加入场和退出动画效果。

<template>
  <div id="app">
    <input type="text" @keyup.enter="addTask">
    <ul>
      <li v-for="task in tasks" @click="removeTask(task)">
        {{ task }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: []
    }
  },
  methods: {
    addTask(e) {
      this.tasks.push(e.target.value)
    },
    removeTask(task) {
      this.tasks = this.tasks.filter(t => t !== task)
    }
  }
}
</script>

<style>
li {
  transition: all 0.5s ease-in-out;
}

li.enter {
  opacity: 0;
  transform: scale(0.5);
}

li.enter-active {
  opacity: 1;
  transform: scale(1);
}

li.leave {
  opacity: 1;
  transform: scale(1);
}

li.leave-active {
  opacity: 0;
  transform: scale(0.5);
}
</style>

案例二：JavaScript过渡

在这个案例中，我们创建一个 slider 组件，并在图片切换时，使用JavaScript过渡来为图片添加渐入渐出动画效果。

<template>
  <div id="app">
    <div class="slider">
      <button @click="prevImage">Prev</button>
      <img :src="currentImage" alt="">
      <button @click="nextImage">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg'
      ],
      currentImage: 'image1.jpg'
    }
  },
  methods: {
    prevImage() {
      let index = this.images.indexOf(this.currentImage)
      index = (index - 1 + this.images.length) % this.images.length
      this.currentImage = this.images[index]
    },
    nextImage() {
      let index = this.images.indexOf(this.currentImage)
      index = (index + 1) % this.images.length
      this.currentImage = this.images[index]
    }
  },
  mounted() {
    this.$refs.image.addEventListener('transitionend', () => {
      this.$refs.image.classList.remove('fade-in')
    })
  }
}
</script>

<style>
.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider img {
  transition: opacity 0.5s ease-in-out;
}

.slider img.fade-in {
  opacity: 1;
}
</style>