当插入或删除包含在 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/animate.css@3.5.1/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/animate.css@3.5.1/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:

            }

            .style-enter-active,.style-leave-active{

                transition: all .3s;

            }

            .style-enter,.style-leave-to{

                opacity:

            }

        </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 =

            el.style.transformOrigin = 'left'

        },

        enter:function (el, done) {

            alert("enter");

        //    console.log(done);

            Velocity(el, {opacity:, fontSize:'1.4em'}, {duration:});

            Velocity(el, {fontSize:'1em'}, {complete:done});

            Velocity(el,"reverse", { duration:  });

            Velocity(el,{

                        borderBottomWidth: [ "2px", "spring" ], // Uses "spring"

                     width: [ "100px", [ ,  ] ], // 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:})

            Velocity(el, {rotateZ:'100deg'}, {loop:})

            Velocity(el,{

                rotateZ:'45deg',

                translateY:'30px',

                translateX:'30px',

                opacity:

            }, {complete:done})

        }

    }

})

</script>

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

vue的动画组件（transition）的更多相关文章

  1. vue内置组件——transition简单原理图文详解

    基本概念 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡 ...

  2. vue内置组件 transition 和 keep-alive 使用

    1.transition name - string,用于自动生成 CSS 过渡类名.例如:name: 'fade' 将自动拓展为.fade-enter,.fade-enter-active等.默认类 ...

  3. Vue过渡动画运用transition

    vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下 ...

  4. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  5. Vue.js说说组件

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...

  6. vue.js之组件篇

    Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...

  7. Vue.js 动画

    transition 动画: 当插入或删除包含在 transition 组件中的元素时,Vue将会做以下处理:     1.自动嗅探目标元素是否应用了css过滤或动画,如果是,在恰当的时机添加/删除c ...

  8. 从零开始学 Web 之 Vue.js（五）Vue的动画

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. vue 的动画

    1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...

随机推荐

  1. 修改Pycharm for Mac背景色

    Mac 上面的Pycharm的背景是白色,太刺眼,网上教程那么多,实用性都不高,最终在csdn找到了一个. 修改步骤如下: pycharm -->Preferences --> Appea ...

  2. 一道经典的面试题：如何从N个数中选出最大（小）的n个数

    转载:https://zhidao.baidu.com/question/1893908497885440140.html 这个问题我前前后后考虑了有快一年了,也和不少人讨论过.据我得到的消息,Goo ...

  3. el-table实现表格的编辑、删除、以及新增行的方法

    直接上代码: html部分: <el-form :model="inServForm" ref="inServForm" label-width=&quo ...

  4. Jqeury ajax 调用C#的后台程序

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQueryTest.aspx. ...

  5. Java反射-初步入门

    Java反射-初步入门 学反射先了解什么是反射. 百度百科:JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动 ...

  6. cookie和session的区别与联系

    http://www.cnblogs.com/s1nker/p/4876284.html 基本概念 对于许多人来说,都知道的是,cookie是存储在客户端的,可以用来放需要长期使用的内容,例如用户密码 ...

  7. 【SQL查询】分区查询Over

    1. Over介绍 Over为开窗函数.就是把满足条件的数据分成几个区域,每个区域可以通过像现实中的“窗口”来观察统计这些数据. over不能单独使用,要和分析函数:rank(), dense_ran ...

  8. c++下使用邮槽实现进程间通信

    Windows API提供了邮槽和命名管道两种机制来实现进程间通信,在这里使用C++实现邮槽. 邮槽是Windows提供的一种进程间单向通信的机制,进程中的一方只能读取(或写入)数据,而另一方只能写入 ...

  9. OkHttp之BridgeInterceptor简单分析

    在< Okhttp源码简单解析(一) >这篇博客简单分析了Okhttp请求的执行流程,通过该篇博客我们知道OkHttp的核心网络请求中内置"拦截器"发挥了重大作用:本篇 ...

  10. Apache配置php redis扩展

    1.根据phpinfo,下载redis 下载地址:注意php版本号 http://windows.php.net/downloads/pecl/snaps/redis/2.2.5/ http://wi ...