VUE3基础入门-动画与过渡-码农小朱

Vue 提供了两个内置组件，可以帮助我们制作基于状态变化的过渡和动画

<Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用它。
<TransitionGroup> 会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。

<Transition> 组件的使用

<Transition>组件，它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上（简单理解就是Transition会把动画效果使用到它包裹的元素或组件上）就是下面这个样子

<Transition>
    <div>动画效果</div>
</Transition>

Transition动画效果的触发方式，主要依靠被包裹的元素或组件

由 v-if 所触发的切换
由 v-show 所触发的切换
由特殊元素 <component> 切换的动态组件
改变特殊的 key 属性

我们来实现一个简单的动画效果，我们在上一节的代码基础上来进行编写。

我们在helloworld 这个div外面包裹Transition组件，并且通过v-if和isShow变量来设置显示和隐藏从而触发动画。

<Transition>
    <div v-if="isShow">{{message}}</div>
</Transition>

然后我们来声明样式，我们来定义一个slideEnter动画实现一个从右滑到左边的动画效果。

  @keyframes slideEnter{
    0%{
      transform: translateX(100px);
    }
    100%{
      transform: translateX(0);
    }
  }

然后给transition组件内定的属性名v-enter-active设置animation动画属性

v-enter-active 用来定义进入时需要指定的动画

.v-enter-active {
   animation: slideEnter 3s ease;
 }

好，我们可以来看一下效果了，当页面上只有一个按钮，当我们点击按钮时会触发显示一个hello world 并且伴随着从左向右滑动的动画效果。

有了进入动画之后我们还可以通过v-leave-active来定义离开时的动画。我们来定义一个slideOut动画实现一个从左向右滑动的动画效果

@keyframes slideOut{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(100px);
  }
}

.v-leave-active{
  animation: slideOut 3s ease;
 }

好这样在隐藏的时候，它也会出现的一个从左向右滑动的动画效果

v-show和component动态组件触发动画

v-show触发动画，只需要把v-if修改成v-show就行了两者差距不大。

<Transition>
    <div v-show="isShow">{{message}}</div>
</Transition>

component动态组件触发动画，这里我们就需要来声明两个组件了

const CustomButton = {
    template:`<button>自定义按钮</button>`
  }

  const CustomTitle = {
    template: `<h3>自定义标题</h3>`
  }

两个组件都是局部组件需要注册一下再使用，然后我们来声明连个两个变量

然后我们在template里面使用component动态组件给声明一个变量curComponent来动态切换组件。

template: `
      <Transition>
        <Component :is="curComponent"  />
      </Transition>
      <br>
      <button @click="handelClick">切换</button>
    `

最后只需要通过按钮点击事件来切换curComponent为组件名称就可以运行看效果了

methods: {
   handelClick() {
     this.curComponent= this.curComponent=='CustomButton'?'CustomTitle':'CustomButton'
   }
}

全部代码，可以对照一下。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
</head>
<script src="https://unpkg.com/vue@next"></script>

<body>
  <div id="app"></div>
</body>
<script>
  const CustomButton = {
    template:`<button>自定义按钮</button>`
  }

  const CustomTitle = {
    template: `<h3>自定义标题</h3>`
  }

  const app = Vue.createApp({
    components: {
      CustomButton,
      CustomTitle
    },
    data() {
      return {
        message: "hello world!",
        isShow: false,
        curComponent:'CustomButton'
      }
    },
    methods: {
      handelClick() {
        // this.isShow = !this.isShow
        this.curComponent= this.curComponent=='CustomButton'?'CustomTitle':'CustomButton'
      }
    },
    template: `
      <Transition>
        <Component :is="curComponent"  />
      </Transition>
      <br>
      <button @click="handelClick">切换</button>
    `
    //  template: `
    //   <Transition>
    //     <div v-if="isShow">{{message}}</div>
    //   </Transition>
    //   <button @click="handelClick">切换</button>
    // `
  })
  const vm = app.mount("#app")
</script>
<style>
  @keyframes slideEnter{
    0%{
      transform: translateX(100px);
    }
    100%{
      transform: translateX(0);
    }
  }

  @keyframes slideOut{
    0%{
      transform: translateX(0);
    }
    100%{
      transform: translateX(100px);
    }
  }

  .v-enter-active {
    animation: slideEnter 3s ease;
  }
  .v-leave-active{
    animation: slideOut 3s ease;
  }
</style>

</html>

好了，那么这节课就到这里结束了

视频讲解