精华内容
下载资源
问答
  • transition vue2.0动画

    2017-06-29 11:55:00
    相对于vue1.0来说,vue2.0的动画变化还是挺大的,在1.0中,直接在元素中加transition ,后面跟上名字。而在vue2.0中,需要把设置动画的元素、路由放在<transition name="fade"></transition>中,name...

      相对于vue1.0来说,vue2.0的动画变化还是挺大的,在1.0中,直接在元素中加 transition ,后面跟上名字。而在vue2.0中,需要把设置动画的元素、路由放在<transition name="fade"></transition>中,name就是动画名称。

      在1.0时,css需要设置(动画名称以fade为例).fade-transition .fade-enter .fade-leave ,具体用法看:  http://www.cnblogs.com/sunsanfeng/p/animate.html

       在2.0时,css设置大改,.fade-enter{} 元素初始状态 .fade-enter-active{}  元素最终状态  .fade-leave-active{} 元素离开的最终状态

      在2.0中,依然可以与animate.css结合起来一起写动画,具体用法请看第三块代码

      在2.0中,关于动画还为我们提供了一些事件,在下面第四段代码块

    vue1.0动画源码:

     

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <title>孙三峰--博客园</title>
     6         <script type="text/javascript" src="js/vue.js" ></script>
     7         <style>
     8             .oDiv{
     9                 width: 200px;
    10                 height: 200px;
    11                 border: 3px dashed red;
    12                 background: coral;
    13             }
    14             .fade-transition{
    15                 transition: 2s all ease;
    16             }
    17             .fade-enter{
    18                 opacity: 0;
    19             }
    20             .fade-leave{
    21                 opacity: 0;
    22                 transform: translate(200px);
    23             }
    24         </style>
    25     </head>
    26     <body>
    27         <div id="box">
    28             <input type="button" value="button" @click="toggle()" />
    29             <div class="oDiv" v-show="Dist" transition="fade">{{Dist}}</div>
    30         </div>
    31     </body>
    32     <script type="text/javascript">
    33             new Vue({
    34                 el:'#box',
    35                 data:{
    36                     Dist:false
    37                 },
    38                 methods:{
    39                     toggle:function(){
    40                         this.Dist=!this.Dist;
    41                     }
    42                 }
    43             })
    44         </script>
    45 </html>

     

    vue2.0动画源码:

      

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <title>孙三峰--博客园</title>
     6         <script type="text/javascript" src="js/vue2.0.3.js" ></script>
     7         <style>
     8             p{
     9                 width: 300px;
    10                 height: 300px;
    11                 background-color: yellow;
    12             } 
    13             .donghua-enter-active,.donghua-leave-active{
    14                 transition: 5s all ease;
    15             }
    16             .donghua-enter-active{
    17                 opacity: 1;
    18                 width: 300px;
    19                 height: 300px;
    20             }
    21             .donghua-leave-active{
    22                 opacity: 0;
    23                 widows: 100px;
    24                 height: 100px;
    25             }
    26             .donghua-enter,.donghua-leave{
    27                 opacity: 0;
    28                 width: 100px;
    29                 height: 100px;
    30             }
    31         </style>
    32     <script src="vue.js"></script>
    33     <script>
    34         window.onload=function(){
    35             new Vue({
    36                 el:'#box',
    37                 data:{
    38                     show:false
    39                 }
    40             });
    41         };
    42     </script>
    43 </head>
    44 <body>
    45     <div id="box">
    46         <input type="button" value="点击显示隐藏" @click="show=!show">
    47         <transition name="donghua">
    48             <p v-show="show"></p>
    49         </transition>
    50     </div>
    51 </body>
    52 </html>

     

    vue2.0配合 animate.css

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>配合animate.css做动画</title>
     6         <link rel="stylesheet" type="text/css" href="css/animate.css"/>
     7         <script type="text/javascript" src="js/vue2.0.3.js" ></script>
     8         <style>
     9             p{
    10                 width: 300px;
    11                 height: 300px;
    12                 background-color: yellow;
    13                 margin: 0 auto;
    14             } 
    15     </style>
    16         <script type="text/javascript">
    17             window.onload=function(){
    18                 new Vue({
    19                     el:'#box',
    20                     data:{
    21                         show:false
    22                     }
    23                 })
    24             }
    25         </script>
    26     </head>
    27     <body>
    28         <div id="box">
    29             <input type="button" value="点击显示和隐藏" @click="show=!show" />
    30             <transition enter-active-class="zoomOutDown" leave-active-class="zoomOutUp">
    31                 <p v-show="show" class="animated"></p>
    32             </transition>
    33         </div>
    34     </body>
    35 </html>

    vue2.0中,内置的动画事件

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>动画事件</title>
     6         <script type="text/javascript" src="js/vue2.0.3.js" ></script>
     7         <style>
     8             p{
     9                 width: 300px;
    10                 height: 300px;
    11                 background-color: yellow;
    12             } 
    13             .donghua-enter-active,.donghua-leave-active{
    14                 transition: 5s all ease;
    15             }
    16             .donghua-enter-active{
    17                 opacity: 1;
    18                 width: 300px;
    19                 height: 300px;
    20             }
    21             .donghua-leave-active{
    22                 opacity: 0;
    23                 widows: 100px;
    24                 height: 100px;
    25             }
    26             .donghua-enter,.donghua-leave{
    27                 opacity: 0;
    28                 width: 100px;
    29                 height: 100px;
    30             }
    31     </style>
    32     <script>
    33         window.onload=function(){
    34             new Vue({
    35                 el:'#box',
    36                 data:{
    37                     show:false
    38                 },
    39                 methods:{
    40                     beforeEnter(){
    41                         console.log("<!-- 进入动画开始之前 -->");
    42                     },
    43                     Enter(){
    44                         console.log("<!-- 正在进入动画-->");
    45                     },
    46                     afterEnter(el){
    47                         console.log("<!-- 动画结束 -->");
    48                     },
    49                     beforeLeave(el){
    50                         console.log("<!-- 离开动画开始之前 -->");
    51                         el.style.background='blue';    //改变颜色
    52                         el.innerHTML="123";
    53                     },
    54                     Leave(){
    55                         console.log("<!-- 正在离开动画-->");
    56                     },
    57                     afterLeave(){
    58                         console.log("<!-- 离开动画结束 -->");
    59                     },
    60                 }
    61             });
    62         };
    63     </script>
    64 </head>
    65 <body>
    66     <div id="box">
    67         <input type="button" value="点击显示隐藏" @click="show=!show">
    68         <transition name="donghua"
    69             @before-enter="beforeEnter"
    70             @enter="Enter"
    71             @after-enter="afterEnter"
    72             @before-leave="beforeLeave"
    73             @leave="Leave"
    74             @after-leave="afterLeave"
    75         >
    76             <p v-show="show"></p>
    77         </transition>
    78     </div>
    79 </body>
    80 </html>
    81 
    82 </html>

     

    转载于:https://www.cnblogs.com/sunsanfeng/p/transition.html

    展开全文
  • vue transition 过渡动画

    2021-01-14 11:36:13
    transition元素(组件)是由vue提供的,可以为内部的元素添加过渡效果 过程演示 v-enter:过渡的初始状态(隐藏);在过渡开始前被添加,在过渡开始时会被移除 v-enter-to:过渡的结束状态(显示);在过渡开始时...

    transition

    vue允许我们在显示隐藏元素以及创建元素过程中,添加过渡效果
    transition元素(组件)是由vue提供的,可以为内部的元素添加过渡效果

    过程演示

    v-enter:过渡的初始状态(隐藏);在过渡开始前被添加,在过渡开始时会被移除
    v-enter-to:过渡的结束状态(显示);在过渡开始时被添加,在过渡完成时会被移除
    v-enter-active:这里包含了上面的v-enter、v-enter-to两个时间段,在这里可以对上半场过渡定义过渡时间、曲线等
    v-leave:过渡的初始状态(显示);在过渡开始前被添加,在过渡开始时会被移除
    v-leave-to:过渡的结束状态(隐藏);在过渡开始时被添加,在过渡完成时会被移除
    v-leave-active:这里包含了上面的v-leave、v-leave-to两个时间段,在这里可以对下半场过渡定义过渡时间、曲线等

    在这里插入图片描述

    通过name属性设置过渡名称,之后就会根据该名称创建六个类
    例如name = ‘demo’
    表示显示的过程(由隐藏的状态变成显示的状态)
    .demo-enter .demo-enter-to .demo-enter-active
    表示隐藏的过程(由显示状态变成隐藏的状态)
    .demo-leave .demo-leave-to .demo-leave-active
    transition组件只是加了这六各类,具体的效果还需要通过css过渡或者动画(借助css3实现的)
    入场过渡
    我们通过为transition组件添加appear属性,实现入场过渡:当元素加载的时候,执行动画

    • 通过动画效果实现
      html
        <div id="app">
            <button @click="toggle">切换</button>
            <!-- 通过name定义名称,这个名字可以自己取 -->
            <transition name="demo">
                <div class="box" v-show="isShow"></div>
            </transition>
        </div>
    

    js

    let app = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        methods: {
            toggle() {
                this.isShow = !this.isShow
            }
        },
    })
    

    scss

    .box {
        width: 200px;
        height: 200px;
        background-color: green;
    }
    
    // 定义动画
    @keyframes toggle {
        // 只有两个状态,可以写0%-100%,也可以写from-to
        from {
            width: 200px;
            height: 200px;
            opacity: 1;
        }
        to {
            width: 0;
            height: 0;
            opacity: 0;
        }
    }
    // 隐藏过程设置动画,demo表示transition的name属性名称
    .demo-leave-active {
    	// toggle表示动画名称
        animation: toggle 1s;
    }
    // 显示过程设置动画
    .demo-enter-active {
        // reverse 表示动画反转,从后往前
        animation: toggle 1s reverse;
    }
    

    此时会有一个动态的切换效果

    • 通过过渡实现
      scss
    .box {
        width: 200px;
        height: 200px;
        background-color: green;
    }
    
    // 过渡
    // 隐藏
    // v-enter和v-leave-to都表示隐藏的状态
    .demo-enter,
    .demo-leave-to {
        width: 0;
        height: 0;
        opacity: 0;
    }
    // v-enter-to和v-leave都表示显示的状态
    // 如果.box已经有了一个样式,有了宽度和高度,那么这个显示的类就可以 不用设置了
    //.demo-enter-to,
    //.demo-leave {
    //    width: 200px;
    //    height: 200px;
    //    opacity: 1;
    //}
    // 给过程添加过渡
    .demo-enter-active,
    .demo-leave-active {
        transition: all 1s;
    }
    
    • 入场过渡
      我们通过为transition组件添加appear属性,实现入场过渡:当元素加载的时候,执行动画
        <div id="app">
            <button @click="toggle">切换</button>
            <!-- 通过name定义名称 -->
            <!-- 我们通过为transition组件添加appear属性,实现入场过渡:当元素加载的时候,执行动画 -->
            <transition 
                name="demo" 
                appear
            >
                <div class="box" v-show="isShow"></div>
            </transition>
        </div>
    

    此时页面刚打开的时候就会执行动画

    过渡事件

    css3过渡和动画有事件,我们可以通过DOM监听到
    过渡事件:webkitTransitionStart, webkitTransitionEnd
    动画事件:webkitAnimationStart, webkitAnimationEnd
    vue实现的过渡也可以监听动画开始与结束的事件
    显示过程:
    before-enter:处于隐藏状态 after-enter:处于显示状态 enter:显示过程
    隐藏过程:
    before-leave:处于显示状态 after-leave:处于隐藏状态 leave:隐藏过程
    我们可以通过v-on指令或者是@语法糖来监听这些事件

            <transition 
                name="demo" 
                appear
                @before-enter="beforeEnter"
                @after-enter="afterEnter"
                @enter="enter"
                @before-leave="beforeLeave"
                @after-leave="afterLeave"
                @leave="leave"
            >
                <div class="box" v-show="isShow"></div>
            </transition>
    
            // 事件回调函数
            beforeEnter() {
                console.log(111, 'beforeEnter');
            },
            afterEnter() {
                console.log(222, 'afterEnter');
            },
            enter() {
                console.log(333, 'enter');
            },
            beforeLeave() {
                console.log(444, 'beforeLeave');
            },
            afterLeave() {
                console.log(555, 'afterLeave');
            },
            leave() {
                console.log(666, 'leave');
            }
    

    多元素过渡

    我们可以在transition中,定义多个元素,实现多个元素之间的过渡
    内部的元素必须设置key属性,属性值是唯一的。
    我们通过mode属性定义切换模式:
    in-out 新元素先执行,再执行当前的元素
    out-in 当前的元素先执行,再执行新元素
    默认两个元素同时执行

            <!-- 我们通过mode属性定义切换模式:默认同时执行 -->
            <!-- in-out		新元素先执行,再执行当前的元素
                 out-in		当前的元素先执行,再执行新元素 -->
            <transition 
                name="demo" 
                appear
                mode="in-out"
            >
                <div class="box" v-if="isShow" :key="1"></div>
                // transition里只能有一个元素,所以必须借助v-if v-else
                <div class="box2" v-else :key="2"></div>
            </transition>
    

    列表过渡

    我们通过v-for指令渲染列表
    使用v-for指令创建列表元素的时候,如果需要过渡,要使用transition-group组件
    与transition组件的区别是:transition-group会渲染一个真实的元素
    默认是span。通过tag属性可以自定义渲染的结果
    使用列表过渡的时候,每一个元素都要添加一个值是唯一的并且稳定的key属性
    transition与transition-group的区别
    transition 控制一个元素
    transition-group 控制多个元素

    html

        <div id="app">
            <button @click="addItem">添加成员</button>
            <button @click="random">打乱顺序</button>
            <hr>
            <transition-group name="ickt" tag="div" class="list"> 
                <span v-for="(item, index) in nums" :key="index">{{item}}</span>          
            </transition-group>
        </div>
    

    css

    .list {
        span {
            font-size: 30px;
            padding: 30px 20px;
            display: inline-block;
            transition: all 1s;
        }
    }
    

    js

    let app = new Vue({
        // 视图
        el: '#app',
        // 数据
        data: {
            nums: [0, 1, 2, 3, 4, 5]
        },
        methods: {
            addItem() {
                // 随机一个位置添加
                this.nums.splice(
                    // 随机一个位置
                    Math.floor(Math.random() * this.nums.length),
                    0,
                    this.nums.length
                )
            },
            // 改变数据顺序
            random() {
                this.nums.sort((a, b) => Math.random() < 0.5 ? 1 : -1)
            }
        },
    })
    
    展开全文
  • vue transition

    2019-09-20 05:26:55
    Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑。这里只涉及单元素/组件的过渡实现,vue2.0的...

    Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑。这里只涉及单元素/组件的过渡实现, vue2.0的文档 中还讲到了初始渲染的过渡、多个元素的过渡、多个组件的过渡和列表过渡,他们的过渡效果实现方式和单元素/组件的类似,我感觉实际项目中用的不太多吧,有兴趣的同学可以去了解一下,文档这里说的多个元素和多个组件 和我们的理解可能不太一样 ,一定要仔细阅读文档,搞清楚到底说的是什么样的情况。

    什么是过渡

    Vue只有在插入,更新或者移除DOM元素时才会应用过渡效果,过渡效果的应用可以通过不同方式实现,官方文档中提到了如下几种:

    1. 在CSS过渡和动画中自动应用class;

    2. 配合使用第三方的CSS动画库,如Animate.css;

    3. 在过渡钩子函数中使用JavaScript直接操作DOM;

    4. 配合使用第三方JavaScript动画库,如Velocity;

    上面四种方式其实主要就是两种,一个是利用CSS过渡或者动画,另一个是利用JavaScript钩子函数。

    怎么应用过渡到元素/组件上

    要想使元素或者组件应用到我们所写的过渡动画,需要使用vue提供的transition来封装组件成为过渡组件,transition需要与如下情景中的任一种一起使用:

    • v-if(条件渲染)

    • v-show(条件展示)

    • 动态组件

    • 在组建的根节点上,并且被vue实例DOM方法触发,如appendTo方法把组件添加到某个根节点上

    当需要插入或者删除封装成过渡元素的元素时,vue将做如下事情:

    1. 查找目标元素是否有CSS过渡或者动画,如果有就在适当的时候进行处理;

    2. 如果过渡组件设置了JavaScript钩子函数,vue会在相应阶段调用钩子函数;

    3. 如果以上两者都没有,DOM操作(插入或者删除)就在下一帧立即执行。

    CSS过渡

    先举一个典型的CSS过渡的例子:

    <!-- 首先将要过渡的元素用transition包裹,并设置过渡的name,然后添加触发这个元素过渡的按钮(实际项目中不一定是按钮,任何能触发过渡组件的DOM操作的操作都可以) -->
    <div>
      <button @click="show=!show">show</button>
      <transition name="fade">
        <p v-show="show">hello</p>
      </transition>
    </div>
    // 接着为过渡类名添加规则
    &.fade-enter-active, &.fade-leave-active
      transition: all 0.5s ease     
    &.fade-enter, &.fade-leave-active
      opacity: 0

    封装上面的代码,就可以实现一个简单的动画了,CSS的transition属性是用来设置过渡总体效果的,具体可参考: http://www.w3cplus.com/content/css3-transition 。

    CSS过渡类名

    组件过渡过程中,会有四个CSS类名进行切换,这四个类名与上面transition的name属性有关,比如name="fade",会有如下四个CSS类名:

    1. fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;

    2. fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成之后移除;

    3. fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;

    4. fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成之后被删除;

    从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。

    上面示例中,fade-enter和fade-leave-active类设置CSS为opacity:0,说明过渡刚进入和离开的时候透明度为0,即不显示。当然还可以设置其他的CSS属性,transform属性是除了opacity之外经常在这里被用到的,transform用法可参考 http://www.w3cplus.com/content/css3-transition

    CSS动画

    组件过渡的实现不仅可以通过CSS过渡还可以通过CSS动画(animation)实现,建议先了解一下CSS3 Animation ,这里还是给个例子:

    <div>
      <button @click="show=!show">show</button>
      <transition name="fold">
        <p v-show="show">hello</p>
      </transition>
    </div>
    .fold-enter-active {
      animation-name: fold-in;
      animation-duration: .5s;
    }
    .fold-leave-active {
      animation-name: fold-out;
      animation-duration: .5s;
    }
    @keyframes fold-in {
      0% {
        transform: translate3d(0, 100%, 0);
      }
      50% {
        transform: translate3d(0, 50%, 0);
      }
      100% {
        transform: translate3d(0, 0, 0);
      }
    }
    @keyframes fold-out {
      0% {
        transform: translate3d(0, 0, 0);
      }
      50% {
        transform: translate3d(0, 50%, 0);
      }
      100% {
        transform: translate3d(0, 100%, 0);
      }
    }

    如果预先了解了CSS动画(上面给了链接),上面代码还是很好理解的,要注意的是CSS动画中,fold-enter类名在节点插入DOM后不会立即删除,而是在animationed事件触发时删除。

    自定义过渡类名

    上面的四个过渡类名都是根据transition的name属性自动生成的,那么能否自己定义这四个类名呢?是可以的,通过enter-class、enter-active-class、leave-class、leave-active-class这四个特性来定义。

    <div>
      <button @click="show=!show">show</button>
      <transition 
        name="fade"
        enter-class="fade-in-enter"
        enter-active-class="fade-in-active"
        leave-class="fade-out-enter"
        leave-active-class="fade-out-active"
      >
        <p v-show="show">hello</p>
      </transition>
    </div>
    &.fade-in-active, &.fade-out-active
      transition: all 0.5s ease     
    &.fade-in-enter, &.fade-out-active
      opacity: 0

    上面代码中,原来默认的fade-enter类对应fade-in-enter,fade-enter-active类对应fade-in-active,依次类推。

    JavaScript钩子函数

    除了用CSS过渡的动画来实现vue的组件过渡,还可以用JavaScript的钩子函数来实现,在钩子函数中直接操作DOM。我们可以在属性中声明以下钩子:

    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:enter-cancelled="enterCancelled"
      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
      v-on:leave-cancelled="leaveCancelled"
    >
    </transition>
    methods: {
      // 过渡进入
      // 设置过渡进入之前的组件状态
      beforeEnter: function (el) {
        // ...
      },
      // 设置过渡进入完成时的组件状态
      enter: function (el, done) {
        // ...
        done()
      },
      // 设置过渡进入完成之后的组件状态
      afterEnter: function (el) {
        // ...
      },
      enterCancelled: function (el) {
        // ...
      },
      // 过渡离开
      // 设置过渡离开之前的组件状态
      beforeLeave: function (el) {
        // ...
      },
      // 设置过渡离开完成时地组件状态
      leave: function (el, done) {
        // ...
        done()
      },
      // 设置过渡离开完成之后的组件状态
      afterLeave: function (el) {
        // ...
      },
      // leaveCancelled 只用于 v-show 中
      leaveCancelled: function (el) {
        // ...
      }
    }

    上面的钩子函数中可以进行任何你想做的DOM操作。

    小技巧:如果你只想设置组件过渡进入的效果而不想有组件过渡离开的效果,这时你就可以用钩子函数,只设置beforeEnter、enter、afterEnter这几个钩子函数就可以了。

    转载于:https://my.oschina.net/u/3284240/blog/842552

    展开全文
  • VUE之过渡transition Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具: 在 CSS 过渡和动画中自动应用 class–基础动画 可以配合使用第三方 CSS 动画库,如 Animate.css–CSS动画 ...

    VUE之过渡transition

    Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:
    在 CSS 过渡和动画中自动应用 class–基础动画
    可以配合使用第三方 CSS 动画库,如 Animate.css–CSS动画
    在过渡动画钩子函数中使用 JavaScript 直接操作 DOM—JS动画
    可以配合使用第三方 JavaScript 动画库,如 Velocity.js—JS动画库
    Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
    条件编译 (使用 v-if)
    条件渲染 (使用 v-show)
    动态组件component
    组件根节点
    过渡的类名
    在进入/离开的过渡中,会有 6 个 class 切换:
    v-enter(插入)类:
    ①v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除
    ②v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
    ③v-enter-to: 2.1.8版及以上,定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter被移除),最后在过渡/动画完成之后与v-enter-active一起移除。
    v-enter(插入)类原理—动画流程概念图
    在这里插入图片描述
    v-enter第一帧加入,第二帧移除;v-enter-active第一帧加入、贯穿整个过程结尾移除;v-enter-to第二帧加入、贯穿整个过程结尾移除

    v-leave(移除)类:
    ①v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
    ②v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
    ③v-leave-to: 2.1.8版及以上,定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),最后在过渡/动画完成之后与v-leave-active一起移除。
    v-leave(移除)类原理—动画流程概念图:
    在这里插入图片描述
    同理:第一帧(增加v-leave和v-leave-active)、第二帧(移除v-leave、增加v-leave-to),最后一帧(移除v-leave-active和v-leave-to)
    概念图:
    在这里插入图片描述
    过渡标签
    过渡标签:
    Vue中如果想要给某个元素添加过渡效果或动画,需要给该元素外部使用标签进行包裹。
    版本更迭:
    Vue1.0中transition做为标签的行内属性被vue支持。但在Vue2.0中。Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用。
    过渡名
    对于这些在过渡中切换的类名来说分两种,一种是没有name名字,另一种是有name(推荐)
    ①如果使用一个没有名字的 ,则 v- 是这些类名的默认前缀
    ②如果使用了 ,那么 v-enter 会替换为 my-transition-enter。

    推荐:因为一个页面里,会存在多个过渡,所以通常给过渡中切换的类名加上名字name
    过渡名-没有名字
    (1)没有名字的
    隐藏案例(点击按钮,实现过渡隐藏)
    在这里插入图片描述
    过渡原理分析
    过渡时长具体大小由v-leave-active决定
    在这里插入图片描述
    分析概念图可以得知v-leave-active贯穿了整个过渡,所以整体时长可以由其决定。

    (2)带名字的:如果想实现两种过渡,即所耗时间不同,没有名字的 无法分开设置。此时便需要transition添加name
    在这里插入图片描述
    单元素过渡-移除
    首先看个典型案例
    点击按钮实现隐藏的过渡(即display由block→none)
    在这里插入图片描述
    点击后查看代码,分析进程
    (fadeout-leave)→(fadeout-leave-active)→(fadeout-leave-to)
    在这里插入图片描述
    单元素过渡原理
    原理分析:
    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理:
    ①自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。
    ②如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当时机被调用。
    ③如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作 (插入/删除) 在下一帧中立即执行。
    单元素过渡-插入
    接下来做个显示过渡
    在这里插入图片描述
    单元素过渡-切换
    将两者结合下,做个显隐切换过渡
    在这里插入图片描述

    VUE之动画与animate.css动画库

    过渡动画原理
    在进入/离开的过渡中,会有 6 个 class 切换:
    v-enter(插入)类原理—动画流程概念图
    在这里插入图片描述
    v-enter第一帧加入,第二帧移除;v-enter-active第一帧加入、贯穿整个过程结尾移除;v-enter-to第二帧加入、贯穿整个过程结尾移除
    v-leave(移除)类原理—动画流程概念图:
    在这里插入图片描述
    同理:第一帧(增加v-leave和v-leave-active)、第二帧(移除v-leave、增加v-leave-to),最后一帧(移除v-leave-active和v-leave-to)
    概念图
    在这里插入图片描述
    过渡
    首先回顾下过渡效果的实现
    在这里插入图片描述
    动画
    借助fade-leave-active和fade-enter-active贯穿整个过程的特性,可以这样去写动画效果
    (1)首先将CSS代码修改如下
    在这里插入图片描述
    (2)定义+调用动画效果
    在这里插入图片描述
    公共化动画名
    公共化动画名
    顾名思义,就是将动画名提取出来,以后直接使用即可。

    公共化动画名步骤:
    1、自行随意定义修改动画名
    在这里插入图片描述
    2、不使用默认提供的命名规范,在transition标签里添加相关属性
    (1)enter-active-class属性
    (2)enter-leave-class属性
    在这里插入图片描述
    综上所述,当某些动画应用较多时,可以使用transition标签的enter-active-class属性和enter-leave-class属性调用公共的动画名。
    语法如下所示
    在这里插入图片描述
    Vue+animate.css动画库
    【前言】
    既然现在可以自己定义enter-active-class和leave-active-class动画类名,决定相关动画效果,借助这个特性,可以在vue项目里使用当前比较流行的animate.css动画库(https://daneden.github.io/animate.css)。
    在这里插入图片描述
    Vue+animate.css动画库步骤
    (1)下载代码库引入
    在这里插入图片描述
    (2)选择相应动画效果类名并引入,如下所示
    在这里插入图片描述
    至此,便可以实现vue+animate.css动画库的结合使用

    优势:
    像某些比较复杂的动画效果,此时便省去手写过程,直接引入使用现有动画库即可,大大提高了开发效率。
    注意:
    1、必须使用transition标签的自定义动画名属性,即enter-active-class和leave-active-class
    2、使用时必须加入animated类名
    动画VS过渡
    CSS 动画与CSS 过渡用法类似,区别在于
    ①在过渡中v-enter类名在元素被插入之前生效,在元素被插入之后的下一帧移除,即在节点插入 DOM 后会立即删除
    ②在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animation end 事件触发时删除

    VUE之过渡+动画

    页面初始化渲染动画
    目前为止,已经结合animated.css动画库实现了@keyframes类型动画切换效果。
    【前言】
    如果想在页面初始化时渲染动画效果,此时需要用到appear呈现属性和appear-active-class呈现过渡属性,语法如下
    在这里插入图片描述
    过渡+动画
    如果想在元素过渡的同时添加动画效果,此时又需要用到enter-active-class和leave-active-class属性
    步骤:
    1、添加过渡类名+动画名,这里为了方便查看效果,我将动画改为swing抖动,如下所示
    在这里插入图片描述
    2、设置transition过渡属性值
    在这里插入图片描述
    测试后发现此时便可以实现过渡+动画同时作用与指定元素

    时间BUG:
    目前为止,过渡时间与动画@keyframes类型时间还不一致,这里过渡时间为3s,查看源码后发现动画库的延时为1秒
    如果时间不进行统一,可能导致不可预测的bug,影响vue项目性能,所以需要统一时间
    过渡时长type属性
    一般为了效果执行完毕,时长以较长的为准,所以这里以过渡时长transition为准,此时需要添加type属性,语法如下

    (1)type=”transition”
    在这里插入图片描述
    (1)type=”transition”以过渡时长为准,测试如下
    在这里插入图片描述
    动画时长type属性
    除此之外,也可以以@keyframes动画时长为准,语法如下
    (2)type=”animation”
    在这里插入图片描述
    验证方法和之前类似,控制台检测即可。
    自定义时长
    除了使用transition标签元素的type属性去指定时长外,也可以自定义时长,此时需要用到duration延迟属性,如法如下
    在这里插入图片描述
    入场时长+出场时长
    除了统一设定时长外,也可以分开设置入场+出场时长,如下所示
    在这里插入图片描述
    注意:duration延时属性,如果想识别后面的表达式,需要利用v-bind动态绑定该属性,否则会报错。

    VUE之过渡动画钩子函数+Velocity.js动画库

    CSS实现方式
    目前为止已经介绍了Vue过渡与动画实现方式,包含transition过渡类型动画和@keyframes类型动画。
    JS钩子函数方式+第三方库
    除了用CSS来实现vue的组件过渡与动画,还可以用JavaScript的钩子函数来实现,在钩子函数中直接操作DOM即可。正如之前所说,可以配合使用第三方 JavaScript 动画库,如 Velocity.js
    Velocity.js→发音[vəˈlɒsəti]→译为高速
    动画钩子分类
    钩子函数分为入场钩子和出场钩子,具体分类及含义如下所示
    1、入场钩子
    before-enter进入过渡前
    enter过渡运行时
    after-enter过渡完成后
    enter-cancelled过渡被打断时

    2、出场钩子
    before-leave离开过渡运行前
    leave离开过渡运行时
    after-leave离开过渡运行后
    leave-cancelled离开过渡被打断时、
    入场钩子
    首先新建个普通组件,可以实现简单显隐切换
    在这里插入图片描述
    接下来结合案例来介绍下动画钩子函数
    (1)入场钩子before-enter进入过渡前状态
    验证如下所示
    在这里插入图片描述
    验证后发现,当显示过渡动画区域,即区域入场时,触发before-enter钩子函数
    此外,before-enter函数还包含一个el参数,表示绑定过渡动画的元素。验证如下
    before-enter函数之el元素参数,例如在进入过渡前将文本颜色变为红色
    在这里插入图片描述
    为了方便测试,这里我将文本字体设置大点
    在这里插入图片描述
    (2)入场钩子enter过渡进入完成时状态
    语法:
    enter钩子和before-enter稍微有些差异,before-enter会接受两个参数,语法为enter(el,done),done为回调函数
    触发时机:
    当before-enter触发完毕后的下一帧,将会真正运行动画效果,整个动画效果也将放到enter这个钩子阶段。
    案例:2s后元素字体颜色变绿
    在这里插入图片描述
    done回调函数:
    当动画执行结束后需要手动去调用done回调函数,告诉vue动画执行完毕,至此才可以进行下一步操作,代码如下所示
    在这里插入图片描述
    (3)入场钩子after-enter过渡完成后
    执行时机:
    在enter过渡进入完成后触发done()回调函数,告知vue动画执行完毕,下一步执行after-enter过渡完成后钩子函数。
    要求:过渡完成后字体变黑
    在这里插入图片描述
    为了测试效果更加明显,接下来修改下代码,将动画时长调至4s结束。
    即2s时字体发生变化,4s时才结束动画,如下所示
    在这里插入图片描述
    (4)入场钩子enter-cancelled过渡被打断
    在这里插入图片描述
    入场钩子小结
    入场钩子简单语法总结如下
    在这里插入图片描述
    出场钩子
    出场钩子与入场钩子语法类似,自行验证即可
    1、before-leave(el)离开过渡运行前
    2、leave(el,done)离开过渡运行时
    3、after-leave(el)离开过渡运行后
    4、leave-cancelled(el)离开过渡被打断时
    注意:
    leave与enter同样,接收两个参数即el和done回调函数。

    动画钩子
    小结:
    上面的钩子函数中可以进行任何你想做的DOM操作。
    小技巧:
    如果你只想设置组件过渡进入的效果而不想有组件过渡离开的效果,这时你就可以用钩子函数,只设置beforeEnter、enter、afterEnter这几个钩子函数就可以了。

    Velocity.js动画库
    随着互联网越来越丰富多样,网页端的美化和新技术层出不穷,作为一个网站的浏览者,更多吸引他们的除了保证网站的流畅之外还有各种炫酷的交互动效。
    网页的交互动效大概分为 css动画,js动画 。
    为什么是velocity不是jquery?
    当前,如何快速制作js动效,许多人可能会首先想到使用jquery。
    使用jquery制作的各种动效在网络上也非常丰富。jquery的优点不言而喻,简单易用,高效开发。但要知道jquery动画性能并不是最优的。
    因为jquery想要实现的目标太多,动画性能上就不可避免做出妥协。因此要制作高性能js动画,可能不得不放弃jquery,转而使用原生js制作动画。那有没有一种js高性能动效库,既像jquery一样简单易用,动画又高性能?这就是velocity.js动画库了。
    js动画
    JS动画的库非常多,各有各的有点,比如jquery自带的animate动画还有 webGL,或者利用canvas,SVG等实现其他效果,本节来讲的就是众多库中的其中一个 velocity.js 动画库。
    velocity.js 既可以单独用JavaScript使用,也可以配合jquery使用,使用方法(注意先将velocity.js下载好后在body标签下引入,然后在新script标签中书写效果实现语法即可)
    JS动画VS传统css动画:
    既然我们大概了解了这两类动画,接下来分析下两者区别
    1、css动画→由于css3可以根据css属性自定义动画,所以这类动画的优点就是不用进行计算和更改dom 会显得非常流畅
    2、JS动画→js动画拥有强大的性能,并且优于css动画的特点就是 既然是根据js来改变属性值,所以没有css那样的局限性,可以实现更多的功能和动效,或许有人说js动画某些库会很慢,其实js动画本质很快,只是jquery让它慢了下来。因为有时候由于配合jquery使用,所以由于jquery本身的一些功能,所以在实现的时候就会显得很慢。
    Velocity.js动画库优点
    1、Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作,并和$.animate()有相同的 API,但它不依赖 jQuery,可单独使用。
    2、Velocity 不仅包含了 $.animate() 的全部功能, 还拥有:颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。
    3、有几十种类似animate.css的预定义动画api
    4、支持自定义动效,拼装队列动效等等
    5、动画回调 比如 Begin & Complete & Progress 回调函数
    Velocity.js动画库趣点:
    velocity会自动记录下动画执行的路径、时间以及效果等,然后会按动画原效果返回。也就是说,不管你动画效果设计得再复杂,如果要动画原路返回,只需一句代码
    动画效果原路返回。如果我们做了一个比较炫酷或者比较复杂的动画效果,然后需要制作动画原路返回的效果,只需如此:

    $element.velocity("reverse");
    

    Vue+Velocity.js
    接下来结合具体案例来介绍下Vue+Velocity.js实现相关动效
    (1)引入Velocity.js文件
    在这里插入图片描述
    (2)接下来清除原先动画钩子创建的自定义动画,开始使用Velocity.js实现特效,代码重置如下所示。
    在这里插入图片描述
    (3)结合动画钩子,设定入场前透明度为0,如下所示
    在这里插入图片描述
    (4)入场前为0,动画开始执行到enter阶段时,希望透明度由0慢慢变为1,即设置入场动画过程透明度为1,结合Velocity.js代码库,代码如下所示
    在这里插入图片描述
    (5)complete完结属性
    目前为止,测试后发现可以出现效果,但是存在BUG…
    在这里插入图片描述
    (1)需要用到Velocity实例的complete完结属性,表示Velocity动画执行完毕
    (2)给complete属性赋值为done回调函数,表示该vue过渡动画阶段完结,可以接着往下进行

    小结:
    目前为止,便已经可以使用Vue中动画钩子实现JS动画效果,并且可以结合Velocity.js动画库进而通过简单语法实现一些酷炫的动画效果。
    关于Velocity.js的其他用法可以去Velocity官网阅读相关API测试即可。

    以上为分享内容!

    展开全文
  • transitionvue1.0和vue2.0中的区别 1. html部分: vue1.0 <div class="shopcart-list" v-show="listShow" transition="fold"> <!--more code--> </div> vue2.0 <transition name="fold"&...
  • vue transition无效

    千次阅读 2020-03-12 15:06:32
    vue transition无效 模仿iview drawer过程中,使用vuetransition组件,发现当transition的样式写在,transition .dashboard样式上面时,transition动画无效 <transition name="drawer"> <div class=...
  • Vue transition

    2017-08-11 20:31:17
    组件过渡过程中,会有四个CSS类名进行切换,这四个类名与上面transition的name属性有关,比如name="fade",会有如下四个CSS类名: fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除; ...
  • VUE之过渡transition Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具: 在 CSS 过渡和动画中自动应用 class–基础动画 可以配合使用第三方 CSS 动画库,如 Animate.css–CSS动画 ...
  • vue中的transtion是一个动画过渡封装组件,常见的情景时用transition标签包裹的DOM含有动画效果。transition组件的动画效果过渡设置基于css的transition属性设置。如果你对CSS中的transition的使用不够熟悉的话,...
  • transition Vue为标签内部的元素提供了3个进入过渡的类和3个离开过渡的类。如下: 进入过渡的类: v-enter 开始 v-enter-active 过渡 v-enter-to 结束 离开过渡的类: v-leave 开始 v-leave-active 过渡 v-leave-...
  • transition & vue Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 在vue里,可给任何元素和组件添加进入/离开过渡 举个栗子: html: <template> <div class="root-container"> ...
  • Vue transition过渡

    2020-03-13 14:22:09
    Vue transition过渡    Vue在插入、更新或者移除DOM时,提供多种不同方式的应用过渡效果。 (1)单元素/组件过渡          css过渡    ...
  • vue Transition动画使用

    千次阅读 2017-12-14 22:09:21
    vue transition 使用
  • vue-route-transition vue router 切换动画 特性 模拟前进后退动画 基于css3流畅动画 基于sessionStorage,页面刷新不影响路由记录 路由懒加载,返回可记录滚动条位置 前进后退的判断与路由路径规则无关 支持任意...
  • vue动画transition

    2017-05-01 14:09:40
    vue2.0后transition也有了一些改动 1.0时:<p transition="fade"></p>.fade-transition{} .fade-enter{} .fade-leave{}2.0后:<transition name="fade"> 运动东西(元素,属性、路由....) </transition>class定义: ...
  • vue transition 使用

    2020-07-22 10:58:45
    transition <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition>...
  • Vue transition 动画

    2019-10-08 06:07:05
    import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Test from '@/components/test' import Test2 from '@/components/test2' ...
  • vue3 transition

    2021-03-20 22:48:29
    transition transition-group Defination(for all) Describing how * an element * transfer from invisible to present. Distinction Component transition only with a displaying element inside .Means that you...
  • vue transition 封装

    2020-07-10 15:44:55
    transition :name="activeName"> <slot v-if="value"></slot> </transition> </template> <script> export default { name: "index", props:{ value:{ .
  • vue transition组件

    2018-04-26 04:05:10
    CSS3 transition 属性 CSS3 transform 属性 CSS3 animation 属性 在开始正式内容之前,有个骨灰级的推荐:hover.css 顾名思义:就是包含了各种hover时效果的插件。源码非常简单,当我们需要某种效果的时候,直接去...
  • Vue transition动画

    2020-04-13 14:30:03
    官网API: https://cn.vuejs.org/v2/guide/transitions.html 官方的demo点击显示与消失 <div id="demo"> <button v-on:click="show = !show"> Toggle ...transition name="fade"> ...
  • vue transition动画

    2020-04-03 11:08:55
    1、展开收起动画 <template> <button @click="show= !show">.../button>...--这里的name 和 css 类名第一个字段要一样-->...transition name="popup"> <div class="box" v-show="show">&l...
  • vue2.0 transition

    2017-06-28 23:17:00
    vue2.0 transition -- demo实践填坑 前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡。在使用2.0版本做过渡效果的时候,虽然...
  • 使用transition (vue2)

    2018-11-12 14:09:26
    transition 标签包裹移动的元素     css:     div元素时间状态,移动的过程(进入离开的过程,直线运动,运动0.3秒)   div元素移动前和离开后的转态:   (三个参数分别为x,y,z轴,x轴正直...
  • vue transition 动画

    2019-07-19 11:33:09
    <div id="example"> <button @click="show = !show">Toggle show</button>...transition name="bounce"> <p v-if="show">Lorem ipsum dolor sit amet, consectetur adi...
  • vue transition使用

    2019-04-01 15:03:44
    .fade-enter-active{ }进入过渡的结束状态,元素被插入时就生效,在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。 .fade-leave{ }离开过渡的开始状态,元素被删除时...
  • vue transition的理解

    2020-09-09 17:44:55
    最近开发的过程中用到了vuetransition组件,写一下自己的心得体会。 transition的作用 首先我的理解是transition是作为元素切换时的过渡动画,例如在一个div进行v-if,v-show的时候,他的显示与隐藏分别进行怎样...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,388
精华内容 1,355
关键字:

transitionvue

vue 订阅