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

2022-09-26 317

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

在上一篇的文章中，我们了解了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>
复制代码

A88B}1%SH7RXR4{MR721`TU.png

现在这样的效果还只是简单的显示隐藏的效果，如果要进行动画效果呢，可以使用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的效果

C3V09[3ZJPD28$~{S]LLCR6.png

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

.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的效果

2]}LKRXQ8M6W%E1%RA`PBMJ.png

以上的样式名称都是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>
复制代码

7%24I013@Y~SF3H]HDHVJJK.png

属性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

ZT%$C$TG6NL608ZXFZ2}T~9.png

由于我们在样式中给的是 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>
`
复制代码

4UN0JG4W%%YG~@8IBRW}47R.png

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

{2MHFEMND[`U`FKUX1G9HGM.png

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

总结

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

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

前言

单元素入场出场过渡效果

单元素动画效果

属性name

属性class

第三方库

总结

热门文章

最新文章

相关课程

相关电子书