一、过渡(动画)

　　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. C++ 引用本质的详解

    //引用本质的理解① #include<iostream> using namespace std; int GetA(){ ; return a; } int & GetB(){ ...

  2. web页面防盗链功能使用--request.getHeader("Referer")

    使用Request对象设置页面的防盗链 所谓的防盗链就是当你以一个非正常渠道去访问某一个Web资源的时候,服务器会将你的请求忽略并且将你的当前请求变为按正常渠道访问时的请求并返回到相应的页面,用户只有 ...

  3. ie设置ActiveX控件不提示

    ie设置自动允许activex: 对安全设置-受信任的站点区域-对未标记为可安全执行脚本的ActiveX控件初始化并执形脚本(启用)

  4. odoo 在原有工作流中添加审批流

    odoo 在原有工作流中添加审批流 步骤: 1.加入所需的工作流节点以及相连的线(即所添加的审批流),代码如下: <?xml version="1.0" encoding=& ...

  5. VC++分页打印实现

    VC++分页打印实现:  C++ Code  12345678910111213141516171819202122232425262728293031323334353637383940414243 ...

  6. WPF 纯代码生成界面（不使用XAML）

    对于编写 WPF 应用程序,只是用代码进行开发而不使用任何 XAML 不是常见的方式(但是仍然完全支持).只使用代码进行开发的明显缺点是,有可能会使用编写 WPF 应用程序成为极端乏味的工作. WPF ...

  7. JS-表单提交检查表单字数方法

    解决方法: //作用于整个html中 function check(form) { //topic是input的id,descrip是textarea的id var topic = $("# ...

  8. java基础---->hashSet的简单分析(一)

    对于HashSet而言,它是基于HashMap实现的,底层采用HashMap来保存元素的.今天我们就简单的分析一下它的实现.人生,总会有不期而遇的温暖,和生生不息的希望. HashSet的简单分析 一 ...

  9. delay()延迟

    jquery的delay()方法: delay() 方法对队列中的下一项的执行设置延迟. 封装方法: $.fn.fadeInWithDelay = function(){ var delay = 0; ...

  10. Django学习笔记第十二篇--关于自定义数据库字段数据类型

    一.需求背景: django的models模块提供了很多数据字段的数据类型field,但是总有写奇葩需求不能依靠默认字段满足,所以需要自定义数据数据库数据字段类型.所有的自定义field应该在app路 ...