• Vue实现过渡动画的三种方式

    Vue 在插入、更新或者移除DOM 时，提供多种不同方式的应用过渡效果。包括以下方式：

    • 使用vue的transition标签结合css样式完成动画
    • 利用animate.css结合transition实现动画
    • 利用 vue中的钩子函数实现动画

    一、使用vue的transition标签结合css样式完成动画

          1、给需要运动的元素加入transition标签

                  <transition>

                           需要运动的元素

                  </transition>

           2、默认情况下如果控制了transition标签元素的显示和隐藏它会默认给这个元素加入一些class

                隐藏：加入类名:

                   v-leave ：定义离开过渡的开始状态。

                   v-leave-active ：定义离开过渡生效时的状态。

                   v-leave-to ：定义离开过渡的结束状态。

                显示：加入类名:

                   v-enter：  准备进行运动的状态(起始状态)

                  ​​​​​​​ v-enter-active：  整个运动状态

                ​​​​​​​   v-enter-to：  整个运动状态(强调运动的结果，结束状态)

            3、将来如果给transition设置一个name为“show”以后,将来所有的类的名称都需要改变，默认前缀为v- 如果加入了name属性，需要将v- 改为show-

           示例：

    1.     <style>
    2.       .fade-enter-active, .fade-leave-active {
    3.           transition: opacity .5s;
    4.        }
    5.       .fade-enter, .fade-leave-to{
    6.           opacity: 0;
    7.        }
    8.     </style>
    9.     <div id="demo">
    10.         <button v-on:click="show = !show">
    11.           Toggle
    12.         </button>
    13.         <transition name="fade">
    14.           <p v-if="show">hello</p>
    15.         </transition>
    16.     </div>
    17.     <script>
    18.         new Vue({
    19.             el: '#demo',
    20.             data: {
    21.                 show: true
    22.             }
    23.         })
    24.     </script>

    当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

            （1）自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

            （2）如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。

            （3）如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

                      

           对于这些在过渡中切换的类名来说，如果使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

                    v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线

    二、利用animate.css结合transition实现动画

           可以通过以下 attribute 来自定义过渡类名：

            enter-class

            enter-active-class

            enter-to-class (2.1.8+)

            leave-class

            leave-active-class

            leave-to-class (2.1.8+)

         它们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

     

    1. <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    2.     <div id="example-3">
    3.         <button @click="show = !show">
    4.           Toggle render
    5.         </button>
    6.         <transition
    7.           name="custom-classes-transition"
    8.           enter-active-class="animated tada"
    9.           leave-active-class="animated bounceOutRight"
    10.         >
    11.            <p v-if="show">
    12.             明月几时有,把酒问青天。
    13.            </p>
    14.         </transition>
    15.     </div>
    16.     <script>
    17.         new Vue({
    18.             el: '#example-3',
    19.             data: {
    20.                 show: true
    21.             }
    22.         })
    23.     </script>

    三、利用 vue中的钩子函数实现动画

    1. <style>
    2.         .show {
    3.            transition: all 0.5s;
    4.         }
    5.     </style>
    6.     <div id="app">
    7.         <button @click="toggle">显示/隐藏</button><br>
    8.         <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
    9.             <div class="show"  v-show="isshow">
    10.                 明月几时有?把酒问青天
    11.             </div>
    12.         </transition>
    13.     </div>
    14.     <script>
    15.         new Vue({
    16.             el: '#app',
    17.             data: {
    18.               isshow: false
    19.             },
    20.             methods: {
    21.                toggle: function () {
    22.                   this.isshow = !this.isshow;
    23.             },
    24.             beforeEnter: function (el) {
    25.                 console.log("beforeEnter");
    26.                  // 当入场之前会执行 v-enter
    27.                  el.style = "padding-left:100px";
    28.              },
    29.             enter: function (el, done) {
    30.                 // 当进行的过程中每执行 v-enter-active
    31.                 console.log("enter");
    32.               // 为了能让代码正常进行，在设置了结束状态后必须调用一下这个元素的
    33.               // offsetHeight / offsetWeight  只是为了让动画执行
    34.                 el.offsetHeight;
    35.                 // 结束的状态最后写在enter中
    36.                 el.style = "padding-left:0px";
    37.                 // 执行done继续向下执行
    38.                  done();
    39.             },
    40.             afterEnter: function (el) {
    41.                 // 当执行完毕以后会执行
    42.                 console.log("afterEnter");
    43.                  //this.isshow = false;
    44.              }
    45.          }
    46.      }) 
    47.     </script>

    四、综合案例

            1、View代码

    1. <div id="app">
    2.         <div class="add">
    3.             编号: <input id="id" v-color="color" v-focus type="text" v-model="id">
    4.             品牌名称: <input v-model="name" type="text">
    5.             <button @click="add">添加</button>
    6.         </div>
    7.         
    8.         <div>
    9.             <table class="tb">
    10.                 <tr>
    11.                     <th>编号</th>
    12.                     <th>品牌名称</th>
    13.                     <th>创立时间</th>
    14.                     <th>操作</th>
    15.                 </tr>
    16.                 <tr v-if="list.length <= 0">
    17.                     <td colspan="4">没有品牌数据</td>
    18.                 </tr>
    19.                 <!--加入: key="index" 时候必须把所有参数写完整  -->
    20.                 <tr v-for="(item,key,index) in list" :key="index">
    21.                     <td>{{item.id}}</td>
    22.                     <td>{{item.name}}</td>
    23.                     <td>{{item.ctime | dateFrm("/")}}</td>
    24.                     <!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->
    25.                     <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
    26.                 </tr>
    27.             </table>
    28.         </div>
    29.  
    30.         <transition
    31.             @before-enter="beforeEnter"
    32.             @enter="enter"
    33.             @after-enter ="afterEnter"
    34.             @before-leave="beforeLeave"
    35.             @leave="leave"
    36.             @after-leave ="afterLeave"
    37.         >
    38.             <div class="del" v-show="isshow">
    39.                 <ul>
    40.                     <li>您确定要删除当前数据吗</li>
    41.                     <li>
    42.                         <button @click="delById">确定</button>
    43.                         <button @click="showClose">关闭</button>
    44.                     </li>
    45.                 </ul>
    46.             </div>
    47.         </transition>
    48.     </div>

           2、Model代码

    1. // 使用全局过滤器（公有过滤器）
    2.     Vue.filter("dateFrm", function (time,spliceStr) {
    3.         // return "2017-11-16";
    4.         var date = new Date(time);
    5.         //得到年
    6.         var year = date.getFullYear();
    7.         // 得到月
    8.         var month = date.getMonth() + 1;
    9.         // 得到日
    10.         var day = date.getDate();
    11.         return year + spliceStr + month + spliceStr + day;
    12.     });
    13.     // 先将自定义指令定义好
    14.     // directive有两个参数
    15.     //参数一： 自定义指令 v-focus
    16.     //参数二： 对象，对象中可以添加很多方法
    17.     // 添加一个inserted方法:而这个方法中又有两个参数：
    18.     //参数一:el 当前使用自定义指令的对象
    19.     //参数二：obj 是指它(v-color="color" )后面设置的表达式
    20.     //{expression:"color",value:"red",}
    21.     Vue.directive("focus", {
    22.         inserted: function (el, obj) {
    23.             // console.log(el);
    24.             el.focus();
    25.         }
    26.     });
    27.     Vue.directive("color", {
    28.         inserted: function (el, obj) {
    29.             // obj.style.color = "red";
    30.             obj.style.color = obj.value;//????????????
    31.             console.log(obj.value);
    32.         }
    33.     });
    34.     var vm = new Vue({
    35.         el: "#app",
    36.         data: {
    37.             delId:"",// 用来将要删除数据的id进行保存
    38.             isshow:false,
    39.             color: "green",
    40.             id: 0,
    41.             name: '',
    42.             list: [
    43.                 { "id": 1, "name": "德云IT学苑", "ctime": Date() },
    44.                 { "id": 2, "name": "西安邮电大学", "ctime": Date() }
    45.             ]
    46.         },
    47.         // mounted(){
    48.         //     this.getFocus()
    49.         // },
    50.         methods: {
    51.             add: function () {
    52.                 //将id和namepush到list数组中
    53.                 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
    54.             },
    55.             del: function (id) {
    56.                 this.isshow = true;
    57.                 // 将得到的id保存到delId里面
    58.                 this.delId = id;
    59.             },
    60.             beforeEnter:function(el) {
    61.                 el.style.left = "100%";
    62.             },
    63.             enter:function(el,done) {
    64.                 el.offsetHeight;
    65.                 el.style.left = "35%";
    66.             },
    67.             afterEnter:function(el){
    68.             },
    69.             beforeLeave:function(el){
    70.                 el.style.left = "35%";
    71.             },
    72.             leave:function(el,done){
    73.                 el.offsetHeight;
    74.                 el.style.left = "100%";
    75.                 setTimeout(function(){
    76.                     done();
    77.                 },500);
    78.             },
    79.             afterLeave:function(el){
    80.             },
    81.             showClose:function(el){
    82.                 this.isshow = false;
    83.             },
    84.             delById:function() {
    85.                 _this = this;
    86.                 // 根据DelId删除对应的数据
    87.                  var index = this.list.findIndex(function(item){
    88.                     return item.id ==_this.delId;
    89.                 });
    90.                 this.list.splice(index,1);
    91.                 // 关闭删除框
    92.                 this.isshow = false;
    93.             }
    94.         }
    95.     });

               3、CSS代码

    1. #app {
    2.             width: 600px;
    3.             margin: 10px auto;
    4.         }
    5.  
    6.         .tb {
    7.             border-collapse: collapse;
    8.             width: 100%;
    9.         }
    10.         .tb th {
    11.             background-color: #0094ff;
    12.             color: white;
    13.         }
    14.         .tb td,
    15.         .tb th {
    16.             padding: 5px;
    17.             border: 1px solid black;
    18.             text-align: center;
    19.         }
    20.         .add {
    21.             padding: 5px;
    22.             border: 1px solid black;
    23.             margin-bottom: 10px;
    24.         }
    25.         .del li{
    26.         list-style: none;
    27.         padding: 10px;
    28.       }
    29.     .del{
    30.         position: absolute;
    31.         top:45%;
    32.         left: 45%;
    33.         width: 300px;
    34.         border: 1px solid rgba(0,0,0,0.2);
    35.         transition: all 0.5s;
    36.     }

  • 相关阅读:
    【无标题】
    【Vue】vue2与WebApi跨域CORS问题
    插入排序与希尔排序
    微信小程序 右上角分享 实现代码
    Vue3 reactive和ref详解
    win10安装SqlServer2014
    第一篇 打开终端的时候处在哪个位置
    Vue3-小兔鲜项目
    Logical matrix
    常见shell命令
  • 原文地址：https://blog.csdn.net/m0_37911706/article/details/125506275