从专业角度深入了解 Vue 过渡与动画

2024-02-14 20:05:44

CSS 过渡与动画

CSS 过渡

CSS 过渡呈现的是一种过渡过程，简单来说就是一种动画转换过程。

CSS 过渡的用法

过渡系统是 Vue 为 DOM 动画效果提供的一种特性，它能从 DOM 中插入、移除元素，或在元素之间切换，同时产生流畅的动画效果。

.fade-in {
  transition: opacity 1s ease-in-out;
}

.fade-out {
  transition: opacity 1s ease-in-out;
}

Vue 过渡

Vue 提供了两种主要的方式来创建过渡动画：

内置的过渡组件
自定义过渡

内置的过渡组件

Vue 提供了三个内置的过渡组件：

<transition>
<transition-group>
<keep-alive>

自定义过渡

自定义过渡允许您创建自己的过渡动画，并将其应用于任何组件。

Vue.component('my-transition', {
  template: '<div><slot></slot></div>',
  transitions: {
    enter: 'fade-in',
    leave: 'fade-out'
  }
});

实战案例

案例一：渐隐渐现的导航栏

<template>
  <div>
    <nav>
      <ul>
        <li v-for="item in items" :key="item.id">
          <router-link :to="item.path">{{ item.name }}</router-link>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Home', path: '/' },
        { id: 2, name: 'About', path: '/about' },
        { id: 3, name: 'Contact', path: '/contact' }
      ]
    };
  }
};
</script>

<style>
nav {
  background-color: #333;
  padding: 10px;
}

ul {
  list-style-type: none;
  display: flex;
}

li {
  margin-right: 10px;
}

a {
  color: #fff;
  text-decoration: none;
}

.fade-in {
  transition: opacity 1s ease-in-out;
}

.fade-out {
  transition: opacity 1s ease-in-out;
}
</style>

案例二：图片轮播

<template>
  <div>
    <div class="carousel">
      <div class="slides">
        <img v-for="image in images" :key="image.id" :src="image.src" alt="">
      </div>
      <div class="controls">
        <button @click="prev()">Previous</button>
        <button @click="next()">Next</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { id: 1, src: 'image1.jpg' },
        { id: 2, src: 'image2.jpg' },
        { id: 3, src: 'image3.jpg' }
      ],
      currentIndex: 0
    };
  },
  methods: {
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    }
  }
};
</script>

<style>
.carousel {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 1s ease-in-out;
}

.slides img {
  width: 100%;
  height: 100%;
}

.controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.controls button {
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #333;
  background-color: #fff;
  cursor: pointer;
}
</style>