Vue动画事件详解及过渡动画实例

一、引言

Vue.js 是一个流行的JavaScript框架，该框架不仅可以创建单页面应用程序（SPA），还可以帮助Web开发人员快速创建动画效果。本篇文章将介绍Vue.js的动画事件以及过渡动画的实现方法，并提供了两个完整的过渡动画示例。

二、Vue.js的动画事件

在Vue.js中，可以使用以下动画事件来创建动画效果：

1. enter

enter动画事件在一个元素被插入到DOM中时触发。这可以是DOM插入，或从父组件添加。要使用enter动画，可以使用Vue.js提供的transition动画组件，如下所示：

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

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

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

在上面的代码中，.fade-enter-active和.fade- leave-active类定义了状态变化的动画，而.fade-enter和.fade-leave-to类则定义了元素在进入和离开过渡状态时的样式。

2. leave

leave动画事件在一个元素从DOM中删除时触发。这可以是DOM删除，或从父组件删除。使用leave动画的方式与使用enter动画的方式相同，只需将transition元素包装在要删除的元素上即可。以下是一个示例：

<template>
  <div>
    <transition name="fade">
      <div v-if="show">Hello, World!</div>
    </transition>
    <button @click="show = !show">Toggle</button>
  </div>
</template>

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

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

在这个示例中，当按钮被点击时，show的值将被反转，Hello, World! 的div元素被添加到或删除从DOM中。

三、Vue.js的过渡动画

Vue.js 过渡动画是指在添加或删除DOM元素时提供动画效果。进入和离开过渡动画可以使用transition组件。如果只需要在元素进入页面或离开页面时使用过渡动画，则可以在Vue组件定义中使用transitions字段。

<template>
  <transition
    name="slide-fade"
    mode="out-in"
    appear
  >
    <div :key="currentRoute">
      <router-view />
    </div>
  </transition>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      currentRoute: null,
    }
  },
  watch: {
    $route(to, from) {
      this.currentRoute = to.name;
    },
  },
  computed: {},
  created() {},
  methods: {},
  transitions: {
    'slide-fade': {
      enter(el, done) {
        const tl = gsap.timeline()
        tl
          .to(el, { opacity: 1, duration: 0.3 })
          .fromTo(
            el,
            { x: '-100%' },
            { x: '0%', duration: 0.5, onComplete: done }
          )
      },
      leave(el, done) {
        const tl = gsap.timeline()
        tl
          .to(el, { opacity: 0, duration: 0.3 })
          .to(el, { x: '100%', duration: 0.5, onComplete: done })
      },
    },
  },
};
</script>

<style scoped>
.slide-fade-enter-active {
  position: absolute;
  opacity: 0;
}
.slide-fade-leave-active {
  position: absolute;
  opacity: 1;
}
.slide-fade-enter-to,
.slide-fade-leave {
  opacity: 1;
}
.slide-fade-enter {
  transform: translateX(-100%);
}
.slide-fade-leave-to {
  transform: translateX(100%);
}
</style>

在以上代码中，我们使用Vue.js的transition组件为页面添加过渡动画。我们定义了进入和离开的过渡动画，通过在组件中使用animate.css和CSS样式定义动画。当路由更改时，将触发动画效果。

四、过渡动画实例

实例1：抖动loading效果

以下是一个简单的loading动画，使用Vue.js中的transition组件实现：

<template>
  <div class="loading-mask" v-if="!showLoading">
    <transition name="bounce">
      <div class="loading-container" key="loading">
        <div class="loading-item">
          <div class="square square1"></div>
          <div class="square square2"></div>
          <div class="square square3"></div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showLoading: true
    }
  },
  methods: {
    hideLoading() {
      this.showLoading = false;
    },
  },
};
</script>

<style scoped>
.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  z-index: 9999;
}

.loading-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 19999;
}

.bounce-enter-active {
  animation: bounce .5s ease-in-out;
  animation-fill-mode: both;
}

@keyframes bounce {
  0%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}

.square {
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background-color: #333;
  display: inline-block;
  animation: square-flicker 1.5s ease-in-out infinite;
}

.square1 {
  animation-delay: 0.2s;
}

.square2 {
  animation-delay: 0.4s;
}

.square3 {
  animation-delay: 0.6s;
}

@keyframes square-flicker {
  from,
  80%,
  to {
    opacity: 1;
  }

  50%,
  75% {
    opacity: 0.25;
  }
}
</style>

在以上代码中，我们使用Vue.js的transition组件实现了loading效果。我们定义了弹跳过渡动画，并通过animate.css为动画添加了一些抖动效果。

实例2：图片过渡

以下是一个图片淡入淡出的过渡动画：

<template>
  <div class="gallery">
    <div v-for="image in images" :key="image.id" class="gallery-item">
      <transition name="fade">
        <img :src="image.src" alt="image.description" />
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        {
          id: 1,
          src: 'https://picsum.photos/id/237/200/300',
          description: 'A beautiful pink hibiscus flower.',
        },
        {
          id: 2,
          src: 'https://picsum.photos/id/238/200/300',
          description: 'A majestic bald eagle in flight.',
        },
        {
          id: 3,
          src: 'https://picsum.photos/id/239/200/300',
          description:
            'A picture of two cute kittens cuddling together.',
        },
      ],
    };
  },
};
</script>

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

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

在以上代码中，我们使用了Vue.js中的transition组件，以在图像元素的添加和删除时添加淡入淡出的过渡动画。我们在CSS样式中定义了过渡效果，以在图像元素进入或离开时对其进行动画处理。

结论

本文介绍了Vue.js的动画事件和如何实现过渡动画。我们提供了两个示例，具体说明了如何使用Vue.js的transition组件来实现loading动画和图片淡入淡出的过渡动画。我们希望这篇文章对您有所帮助，帮助您进一步探索Vue.js框架中的动画效果。