vue的动画组件（transition）

Posted 2020-10-01 BD_evel

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue的动画组件（transition）相关的知识，希望对你有一定的参考价值。

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

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

v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除），在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发一帧后生效（于此同时 v-leave 被删除），在 transition/animation 完成之后移除。

配合上css的动画库，我们会有很好的效果：https://unpkg.com/[email protected]/animate.min.css"

demo01:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../lib/vue.js"  type="text/javascript"></script>
        <link href="https://unpkg.com/[email protected]/animate.min.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app4">
            <button @click="show = !show">toggle coustom class</button>
            <transition name="bounce"
            enter-active-class="animated tada"
            leave-active-class="animated bounceOutRight">
                <p v-if="show">自定义过渡类名</p>
            </transition>
        </div>
    </body>
</html>
<script>
    new Vue({
    el:‘#app4‘,
    data:{
        show:true
    }
})
</script>

对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用
<transition name="my-transition" 可以重置前缀，比如 v-enter 替换为 my-transition-enter。

demo02

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../lib/vue.js"  type="text/javascript">
        </script>
        <script src="../lib/vue_router.js"></script>
        <style>
            .fade-enter-active,.fade-leave-active{
                transition: all .3s;
                
            }
            .fade-enter,.fade-leave-to{
                opacity:0
            }
            
            .style-enter-active,.style-leave-active{
                transition: all .3s;
                
            }
            .style-enter,.style-leave-to{
                opacity:0
            }
        </style>
    </head>
    <body>
        <div id="app">
              <h1>Hello App!</h1>
              <p>
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签(默认)，你也可以改变 -->
                <router-link to="/foo">Go to Foo</router-link>
                <router-link to="/bar">Go to Bar</router-link>
                <router-link to="/foo/ff">Go to foo ff</router-link>   
              </p>
              <!-- 路由出口 -->
              <!-- 路由匹配到的组件将渲染在这里 -->              
            <!---name="fade" fade成为类名的前缀（我们也可以进行自定义）---->
            <!--<transition name="fade" mode="out-in">
                  <keep-alive>
                        <router-view></router-view>
                  </keep-alive>
            </transition>
            -->            
            <transition name="style" mode="out-in">
                <!--transition是vue的动画组件，会自动监听其中元素得状态改变，为其--->
                <router-view></router-view>
            </transition>            
        </div>
    </body>
</html>
<script>
    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Foo = { template: ‘<div>foo</div>‘ }
    const Bar = { template: ‘<div>bar</div>‘ }
    const Foo_ff={template: ‘<p>foo_ff</p>‘}
    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
       { path: ‘/foo‘, component: Foo },
       { path: ‘/foo/ff‘, component: Foo_ff },
       { path: ‘/bar‘, component: Bar },
    ]
    
    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // （缩写）相当于 routes: routes

    })
    
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount(‘#app‘)    
     
</script>

如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机会被自动调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。

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">

钩子函数配合velocity.js动画使用，来完成动画效果，感觉不错（并且js动画相比css动画的好处，我不知道,好像可以百度到）

https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js

http://velocityjs.org/#reverse

demo

<!--http://velocityjs.org/#reverse-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../lib/vue.js"></script>
    </head>
    <body>
        <div id="app5">
            <button @click="show = !show">toggle hook</button>
            <transition @before-enter="beforeEnter"
                        @enter="enter"
                        @leave="leave"
                    　　:css="false">
                    <p v-if="show">javascript 钩子使用</p>
            </transition>
        </div>
    </body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script >
new Vue({
    el:‘#app5‘,
    data:{
        show:false
    },
    methods:{
        beforeEnter:function (el) {
            console.log(el);
            alert("beforeEnter");
            el.style.opacity = 0
            el.style.transformOrigin = ‘left‘
        },
        enter:function (el, done) {
            alert("enter");
        //    console.log(done);
            Velocity(el, {opacity:1, fontSize:‘1.4em‘}, {duration:300});
            Velocity(el, {fontSize:‘1em‘}, {complete:done});
            Velocity(el,"reverse", { duration: 6000 });
            Velocity(el,{
                        borderBottomWidth: [ "2px", "spring" ], // Uses "spring"
                     width: [ "100px", [ 250, 15 ] ], // Uses custom spring physics
                        height: "100px" // Defaults to easeInSine, the call‘s default easing
                    }, {
                            easing: "easeInSine" // Default easing
                    });
        },
        leave:function (el, done) {
            Velocity(el, {translateX:‘15px‘, rotateZ:‘50deg‘}, {duration:600})
            Velocity(el, {rotateZ:‘100deg‘}, {loop:2})
            Velocity(el,{
                rotateZ:‘45deg‘,
                translateY:‘30px‘,
                translateX:‘30px‘,
                opacity:0
            }, {complete:done})
        }
    }
})
</script>

参考：http://www.chairis.cn/blog/article/27

以上是关于vue的动画组件（transition）的主要内容，如果未能解决你的问题，请参考以下文章

vue的动画组件（transition）

transition Vue内置动画组件

vue切换组件动画 / vue-transition过渡动画

Vue的transition过渡组件动画怎么使用

#yyds干货盘点#Vue-transition组件的Css动画+过渡，笔记总结