VUE学习：vue基础19————动画01：过渡-CSDN博客

本文链接：https://blog.csdn.net/GAlbinus/article/details/117412455

提示：
VUE学习：vue基础19————动画01：过渡

VUE学习：vue基础19————动画01：过渡

前言
动画
- 过渡

前言

本文学习Vue的动画相关内容。

提示：以下是本篇文章正文内容，下面案例可供参考

动画

过渡

过渡案例演示

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
   <style>
      /*设置transition组件管理的内容在显示和隐藏时的样式*/
      .v-enter-active,.v-leave-active{
         transition: all 2s;
      }
      .v-enter,.v-leave-to{
         opacity: 0;
      }
      .v-enter-to,.v-leave{
         opacity: .5;
      }
   </style>
</head>
<body>
<div id="app">
   <button type="button" @click="toggle">{{btnMsg}}</button>
   <transition>
      <template v-if="isShow">
         <div style="height: 200px;width: 200px;background-color: pink;line-height: 200px;text-align: center;color: whitesmoke;font-size: 24px;font-weight: bold">
            RNGNB！
         </div>
      </template>
   </transition>
</div>
</body>
<script>
   let vm = new Vue({
      el: "#app",
      data: {
         isShow:true,
         btnMsg:'隐藏'
      },
      methods: {
         toggle(){
            this.isShow=!this.isShow;
            this.btnMsg=this.isShow?"隐藏":"显示"
         }
      }
   });
</script>

演示效果：

在这里插入图片描述

过渡类名

v-enter:定义元素被插入之前的状态，插入后自动移除

v-enter-to:定义元素进入过渡的状态，此时v-enter被移除

v-enter-active:定义元素插入的整个过程状态，对于过渡所需时间、延迟等内容的设置都应该在该类中实现

v-leave:定义元素被移除之前的状态，开始移除元素则自动移出该样式

v-leave-to:定义元素执行移除的操作时状态，此时v-leave被移除

v-leave-active:定义元素移除的整个过程状态，对于过渡所需时间、延迟执行等内容的设置在该类中实现

过渡类名的触发条件

在Vue提供的transition组件中，使用条件渲染（v-if）或者条件展示(v-show)的时候自动触发进入和离开的过渡效果。

6种过渡类样式会自动切换,完成后全部消失。

移动过渡效果

appear属性设置页面在刷新时，自动执行过渡效果，不会影响按钮执行的效果

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
   <style>
      .move-enter-active,.move-leave-active{
         transition: all 5s;
      }
      .move-enter,.move-leave-to{
         opacity: 0;
         transform: scale(2) translateX(500px);
      }
   </style>
</head>
<body>
<div id="app">
   <button type="button" @click="isMove=!isMove">移动切换</button>
   <!--name属性的默认值是v-->
   <transition appear name="move">
      <h2 v-if="isMove">Hello World！</h2>
   </transition>
</div>
</body>
<script>
   let vm = new Vue({
      el: "#app",
      data: {
         isMove:true
      },
      methods: {

      }
   });
</script>

在这里插入图片描述