一、过渡(动画)

　　1、 简介

　　　　Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，本质上还是使用CSS3动画：transition、animation

　　2、 基本用法

　　　　 1、使用transition组件，将要执行动画的元素包含在该组件内就可以了即 <transition> 运动的元素</transition>

　　　 　2、 过滤的CSS类名：　　

　　　　　　1、v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。　　

　　　　　　2、v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

　　　　　　3、v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。　　　

　　　　　　4、v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

　　　　　　5、v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

　　　　　　6、v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

　　　　3、示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画</title>

    <script src="js/vue.js"></script>

    <style>

        p{

            width: 300px;

            height: 300px;

            background-color:red;

        }

        .fade-enter-active,.fade-leave-active{//表示渐入和渐出的时候要用什么样的动画效果

            transition:all 3s ease;        //所有元素  时间  快慢程度

        }

        .fade-enter-active{//渐入

            opacity:1;                    //透明度

            width:300px;

            height:300px;

        }

        .fade-leave-active{//渐出

            opacity:0;

            width:50px;

            height:50px;

        }

        /* .fade-enter需要放在.fade-enter-active的后面 */

        .fade-enter{

            opacity:0;

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

    <div id="itany">

        <button @click="flag=!flag">点我</button>

        <transition name="fade"

            @before-enter="beforeEnter"

            @enter="enter"

            @after-enter="afterEnter"

            @before-leave="beforeLeave"

            @leave="leave"

            @after-leave="afterLeave"

        >

            <p v-show="flag">网博</p>

        </transition>

    </div>

    <script>

        var vm=new Vue({

            el:'#itany',

            data:{

                flag:false

            },

            methods:{

                beforeEnter(el){

                    // alert('动画进入之前');

                },

                enter(){

                    // alert('动画进入');

                },

                afterEnter(el){

                    // alert('动画进入之后');

                    el.style.background='blue';

                },

                beforeLeave(){

                    // alert('动画即将之前');

                },

                leave(){

                    // alert('动画离开');

                },

                afterLeave(el){

                    // alert('动画离开之后');

                    el.style.background='red';

                }

            }

        });

    </script>

</body>

</html>

　　3、动画内的钩子函数

　　4、结合第三方动画库animate..css一起使用

　　　　<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">

　　　　　　<p v-show="flag">网博</p>

　　　　</transition>

　　　　示例：

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画</title>

    <link rel="stylesheet" href="css/animate.css">

    <script src="js/vue.js"></script>

    <style>

        p{

            width: 300px;

            height: 300px;

            background-color:red;

            margin:0 auto;

        }

    </style>

</head>

<body>

    <div id="itany">

        <button @click="flag=!flag">点我</button>

        <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">

            <p v-show="flag">网博</p>

        </transition>

    </div>

    <script>

        var vm=new Vue({

            el:'#itany',

            data:{

                flag:false

            }

        });

    </script>

</body>

</html>

　　5、多元素动画

　　　  <transition-group>

vue 动画过渡的更多相关文章

  1. vue动画&过渡整理

  2. Vue使用过渡类名实现动画和自定义前缀

    Vue使用过渡类名实现动画和自定义前缀 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> ...

  3. VUE：过渡&动画

    VUE:过渡&动画 vue动画的理解 1)操作css的 trasition 或 animation 2)vue会给目标元素添加/移除特定的class 3)过渡的相关类名 xxx-enter-a ...

  4. 黑马vue---46、vue使用过渡类名实现动画

    黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...

  5. Vue列表过渡

    前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...

  6. Vue版本过渡变化

    到了2.0以后,有哪些变化: 在每个组件模板,不在支持片段代码 之前: <template id="aaa"> <h3>我是组件</h3>< ...

  7. vue动画

    最近想搞搞vue的过渡和动画,以为照着官网写就好了,谁知道还是出现一些状况 具体表现就是不用webpack打包时候写的过渡是正常的,而用了webpack打包就不正常了 说使用了未定义的element: ...

  8. vue动画实现方式

    vue动画实现方式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  9. Vue动画操作

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

随机推荐

  1. 【UVa】Partitioning by Palindromes（dp）

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=27&page=sh ...

  2. 【BZOJ】1674: [Usaco2005]Part Acquisition（spfa）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1674 想法很简单...将每一种看做一个点,如果i可以换成j,那么连边到j.. 费用都为1.. 然后拥 ...

  3. [Openwrt]wifi桥接设置

    1/连接wifi,用扫描加入,新建一个ingerface  client模式 2/新建wifi ,network选lan和自身新建的interface.此interface设置为bridge模式,连接 ...

  4. DataContractAttribute 类

    https://msdn.microsoft.com/zh-cn/library/system.runtime.serialization.datacontractattribute.aspx nam ...

  5. 配置使用TargetFrameworks输出多版本类库

    1.类库右键 2.修改配置 修改前: <Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <Targe ...

  6. pybot/robot命令参数说明【dos下执行命令pybot.bat --help查看】

    Robot Framework -- A generic test automation framework Version: 3.0 (Python 3.4.0 on win32) Usage: r ...

  7. JB开发之问题汇总 [jailbreak，越狱技术]

    1.升级到Mac 10.9.1,Xcode 升级到5出现的问题: 1)升级前要做的事情: ①升级/重新安装iOSOpenDev,在终端输入 xcode-select --switch (xcode_d ...

  8. onTouch事件分发

    事件机制 我们知道view中有onTouch,onClick, 1.并且onTouch优先于onClick执行, 2.onTouch有返回值,为true时onClick并不再执行了 因为一切VIew都 ...

  9. uilabel 和uitextview 自适应大小

    本文转载至 http://blog.csdn.net/liulichao20/article/details/8957752 分类: ios2013-05-21 22:06 321人阅读 评论(0)  ...

  10. 2、Android自己的下拉刷新SwipeRefreshLayout--样式2

    <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/ ...