【Vue3从零开始-第四章】4-2 vue的动画标签transition（上）

蜡笔小心_
429 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第22天，点击查看活动详情。

前言

在上一篇的文章中，我们了解了vue里面对CSS动画效果的一个处理，本章节主要就是使用transition标签来实现单元素组件的过渡和动画效果。

单元素入场出场过渡效果

在以前的文章中，我们写过v-if和v-show指令去控制某个元素的显示隐藏，那么这个元素就是一个单元素效果了。

<script>
  const app = Vue.createApp({
    data(){
      return {
        show: false
      }
    },
    methods: {
      handleClick(){
        this.show = !this.show
      }
    },
    template: `
      <div>
        <div v-if="show">Hello World</div>
        <button @click="handleClick">切换</button>
      </div>
    `
  });

  const vm = app.mount('#root');

</script>

chrome-capture (14).gif

现在这样的效果还只是简单的显示隐藏的效果，如果要进行动画效果呢，可以使用vue里面的一个transition标签。

template: `
  <div>
    <transition>
      <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`

直接在div标签外面包一层transition标签，写完标签之后打开浏览器肯定是没有效果的，这时候我们就要去写一些样式了。

<style>
    .v-enter-from{
      opacity: 0;
    }
    .v-enter-active{
      transition: opacity 3s ease-out;
    }
    .v-enter-to{
      opacity: 1;
    }
</style>

  • v-enter-from表示入场时最初的效果是透明度为0

  • v-enter-to表示入场效果执行完成之后最终的透明度为1

  • v-enter-active表示动画执行的过程，执行opacity样式三秒，并用ease-out的效果

chrome-capture (15).gif

在浏览器中可以看出，点击切换按钮时，入场效果已经执行了，但是出场的时候却没有效果，那接下来就该完善一下出场效果的代码了。

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

  • v-leave-from表示出场时最初的效果是透明度为1

  • v-leave-to表示出场效果执行完成之后最终的透明度为0

  • v-leave-active表示动画执行的过程，执行opacity样式三秒，并用ease-in的效果

chrome-capture (16).gif

以上的样式名称都是vue里面transition标签样式的固定写法，写错了是不会执行的哦。

通过transition标签，并配合一些固定的样式名，就可以很好的实现单元素淡入淡出的过渡效果了。

由于入场动画结束时和出场动画初始化时的效果是一样的，而动画执行过程也可以写成一样的，所以样式代码是可以精简一下的。

<style>
    .v-enter-from{
      opacity: 0;
    }
    .v-enter-active, .v-leave-active{
      transition: opacity 3s ease-out;
    }
    .v-enter-to{
      opacity: 1;
    }
    .v-leave-to{
      opacity: 0;
    }
</style>

单元素动画效果

实现一个简单的位移动画效果就比较简单了，只需要定义一个keyframes的位移动画效果，然后使用v-enter-active和v-leave-active定义动画名称和时长。

<style>
    @keyframes shake {
      0% {
        transform: translateX(-100px);
      }
      50% {
        transform: translateX(-50px);
      }
      100% {
        transform: translateX(50px);
      }
    }
    .v-enter-active, .v-leave-active{
      animation: shake 2s;
    }
</style>

chrome-capture (17).gif

属性name

在上面的过渡效果和动画效果中，我们使用的class名称都是固定以v开头的写法，其实这个是可以自定义的，可以通过transition标签中的name属性。

template: `
  <div>
    <transition name="juejin">
      <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`

比如我们将name属性值改为juejin，那么在定义class样式的时候，就要将v也改成juejin开头了。

<style>
    .juejin-enter-from{
      opacity: 0;
    }
    .juejin-enter-active{
      transition: opacity 3s ease-out;
    }
    .juejin-enter-to{
      opacity: 1;
    }
</style>
  • 由于这个定义了没什么太大的用处，而且写起来也麻烦，所以name属性在一般应用场景是不推荐修改的。

属性class

transition标签中，除了可以自定义name属性之外，还可以自定义class属性，通过class属性可以完全修改样式名称。

template: `
  <div>
    <transition
      enter-active-class="hello"
      leave-active-class="bye">
      <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`
  • enter-active-class绑定值为hello
  • leave-active-class绑定值为bye
<style>
    @keyframes shake {
      0% {
        transform: translateX(-100px);
      }
      50% {
        transform: translateX(-50px);
      }
      100% {
        transform: translateX(50px);
      }
    }
    .hello, .bye{
      animation: shake 1s;
    }
</style>
  • 样式中的名称也要对应的修改为hello和bye

chrome-capture (18).gif

由于我们在样式中给的是 1秒的执行时长，所以看起来会快一些。

除了enter-active-class和leave-active-class之外，其他的出场入场效果都可以自定义class。

  • enter-form-class
  • enter-to-class
  • leave-from-class
  • leave-to-class

使用属性class可以更好的实现一些复杂的动画效果，也可以直接引用第三方库。

第三方库

在这个动画效果animate.style第三方库中，有很多动画效果，无需自己去实现，直接引用CDN，然后在transition标签中的class上就可以直接使用了。

// CDN链接
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

template: `
  <div>
    <transition
      enter-active-class="animate__animated animate__bounce"
      leave-active-class="animate__animated animate__flash">
      <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`

chrome-capture (19).gif

通过给enter-active-class和leave-active-class自定义第三方库中的样式名之后，页面上就会很快的渲染出对应的动画效果了。

chrome-capture (20).gif

更多效果可以在第三方库的右侧导航栏中点击，页面logo就可以出现对应的动画效果了。

总结

本篇文章主要讲解了transition标签实现单元素过渡效果和动画效果，还讲解了该标签的name和class属性，额外带了一段第三方库的实现效果，大家可以多试试哦。

avatar
文章
阅读
粉丝