一、过渡(动画)

　　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. 为什么逻辑斯特回归(logistic regression)是线性模型

    一个典型的logistic regression模型是: 这里明明用了非线性函数,那为什么logistic regression还是线性模型呢? 首先,这个函数不是f(y,x)=0的函数,判断一个模型 ...

  2. java---servlet与filter的联系与区别

    filter是一个可以复用的代码片段,可以用来转换HTTP请求.响应和头信息.Filter不像Servlet,它不能产生一个请求或者响应,它只是修改对某一资源的请求,或者修改从某一的响应. 最近使用插 ...

  3. WPF DataGrid DataGridTemplateColumn 控制模板中控件

    <DataGrid Name="DG">                <DataGrid.Columns>                    < ...

  4. android 开发 - 结束所有activity

    每一个activity都有自己的生命周期,被打开了最终就要被关闭. 四种结束当前的activity方法 //关闭当前activity方法一 finish(); //关闭当前界面方法二 android. ...

  5. Arduino开发版学习计划--直流电机

    代码来源:http://www.cnblogs.com/starsnow/p/4579547.html // --------------------------------------------- ...

  6. PHP 开发环境的搭建和使用03-- 安装mySql

    1/  安装的MySQL版本是5.6.10版本的,直接点击Install 2/ 选择 Execute 3/  更新最新版本成功后,选择 "next" 4/  自定义安装方式,选择C ...

  7. 任务调度quartz整理

    一张图,了解quartz运行机制: 此图表示:Scheduler是容器,Trigger是多个触发器,jobDetail是多个任务,Calendar是多个日历. jobDetail任务,需要指定类实现J ...

  8. 阿里云OSS分片上传DEMO

    分片传输规则 1.不能超过10000片,2.每片必须大于100KB using System; using System.Collections.Generic; using System.Compo ...

  9. webpack4学习笔记（三）

    webpack打包资源文件 1,打包css文件,先安装css-loader和style-loader npm install --save-dev css-loader style-loader we ...

  10. Python中的Numpy

    引用Numpy import numpy as np 生成随机数据 # 200支股票 stock_cnt = 200 # 504个交易日 view_days = 504 # 生成服从正态分布:均值期望 ...