要求：要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中。

原理：通过在特定的时刻增加/移除样式实现。

一、Vue中的过度效果

1.未声明name，Vue默认添加/移除v-enter,v-leave-to,v-enter-active,v-leave-active来实现

v-enter决定元素在加入dom时的样式

v-enter-active决定样式执行状态

v-leave-to对应移除的

实例：为元素添加显示隐藏的过度效果

<style>

        .v-enter,.v-leave-to{

            opacity: 0;

        }

        .v-enter-active,.v-leave-active{

            transition: opacity 1s;

        }

    </style>

</head>

<body>

    <div id="app">

        <transition>

            <h3 v-if="show">Hi Boy</h3>

        </transition>

        <button @click="handleClick">DoIt</button>

    </div>

</body>

<script>

    var app=new Vue({

        el:'#app',

        data:{

            show:true

        },

        methods:{

            handleClick:function(){

            this.show=!this.show

            }

        }

    })

</script>

2.如果声明了对应的name则可以改写为

css：

<style>

        .fade-enter,.fade-leave-to{

            opacity:;

        }

        .fade-enter-active,.fade-leave-active{

            transition: opacity 1s;

        }

    </style>

html：

<div id="app">

        <transition name="fade">

            <h3 v-if="show">Hi Boy</h3>

        </transition>

        <button @click="handleClick">DoIt</button>

    </div>

二、Vue中的动画效果

1.使用自定义动画

html不变，关键是css变为如下

@keyframes myfade{

        from{opacity:}

        to{opacity:}

    }

        .fade-enter-active{

            animation: myfade 1s;

        }

        .fade-leave-active{

            animation: myfade 1s reverse;

        }

实现效果一样，此时我们用的动画，当然动画还有很多效果。

2.采用Animate.css库文件实现动画

使用库文件时我们需要知道除了通过那么调用的另一种调用方法

直接在class中自定义调用的样式

css：

@keyframes myfade{

        from{opacity:}

        to{opacity:}

    }

        .enter{

            animation: myfade 1s;

        }

        .leave{

            animation: myfade 1s reverse;

        }

html：

<transition name="fade"

            enter-active-class="enter"

            leave-active-class="leave"

        >

            <h3 v-if="show">Hi Boy</h3>

        </transition>

此时的enter和leave时我们完全自定义的样式名。

如果向调用animate.css库只需要改写html

如下：

<transition name="fade"

        enter-active-class="animated bounce"

        leave-active-class="animated bounce"

        >

            <h3 v-if="show">Hi Boy</h3>

        </transition>

bounce未调用的动画名。提示前面必须加animated。

具体想要使用什么动画请看animate.css官网

提示：如果想要在页面初始化时播放动画需要添加appear和appear-active-class

<transition name="fade"

        appear

        enter-active-class="animated shake"

        leave-active-class="animated bounce"

        appear-active-class="animated shake"

        >

            <h3 v-if="show">Hi Boy</h3>

        </transition>

三、过度效果和动画效果混用

例子如下：

<style>

    @keyframes myfade{

        from{opacity: 0}

        to{opacity: 1}

    }

        .fade-enter,.fade-leave-to{

            opacity: 0;

        }

        .fade-enter-active,.fade-leave-active{

            transition: opacity 3s;

        }

    </style>

</head>

<body>

    <div id="app">

        <transition name="fade"

                    appear

                    enter-active-class="animated shake fade-enter-active"

                    leave-active-class="animated bounce fade-leave-active"

                    appear-active-class="animated shake"

        >

            <h3 v-if="show">Hi Boy</h3>

        </transition>

        <button @click="handleClick">DoIt</button>

    </div>

</body>

警告：此时opacity过渡动画是3秒，animate.css动画未1秒，执行时间不统一。

解决方法：添加type属性如

type="transition" 以过度效果执行时间执行

type="animation"以动画效果执行时间执行

<transition name="fade" type="transition"

                    appear

                    enter-active-class="animated shake fade-enter-active"

                    leave-active-class="animated bounce fade-leave-active"

                    appear-active-class="animated shake"

        >

2.自定义动画时间

:duration="时长（毫秒）"一般定义

:duration="{enter:1000,leave:2000}"//分别定义出场和入场时长

<transition name="fade" :duration="10000"

                    appear

                    enter-active-class="animated shake fade-enter-active"

                    leave-active-class="animated bounce fade-leave-active"

                    appear-active-class="animated shake"

        >

            <h3 v-if="show">Hi Boy</h3>

        </transition>

Vue过渡动画—Vue学习笔记的更多相关文章

  1. （学习心路历程）Vue过渡/动画 VS. 过渡/动画

    [此篇为本人的个人见解和哔哔赖赖,如果有观点不对的地方,还请大家指出来哇!!] 最近实习在做一个项目,里面应用的动画效果还蛮复杂的,因为本身对Vue框架比较熟悉,所以最终选择了Vue框架. 自己之前从 ...

  2. Vue.js 源码学习笔记

    最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...

  3. vue过渡动画

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

  4. vue过渡动画效果

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

  5. vue过渡 & 动画---进入/离开 & 列表过渡

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

  6. Vue过渡动画运用transition

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

  7. Vue.js 第3章 axios&Vue过渡动画

    promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...

  8. vue 过渡 & 动画

    过渡 & 动画 过渡动画 用css先定义好动画效果 .a-enter-active, .a-leave-active { transition: all 1.5s; } .a-enter, . ...

  9. vue过渡动画样式

    在进入/离开的过渡中,会有 6 个 class 切换. v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除. v-enter-active:定义进入过渡生效时的 ...

随机推荐

  1. linux_修改ip(重启后永久生效)

    vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 TYPE=Ethernet UUID=a20869f2-4095-4e5d-9b0c- ...

  2. 初识python函数

    一.函数 1.什么是函数 函数是对功能或者动作的封装 2.函数的语法和定义 def 函数名(): 函数体 调用: 函数名() 3.关于函数的返回值 return :  返回 1.当程序没写过retur ...

  3. 2018.12.29 codeforces 940E. Cashback（线性dp）

    传送门 题意:给出一个nnn个数的序列,要求将序列分成若干段,对于一段长度为kkk的自动删去最小的⌊kc⌋\left \lfloor \frac{k}{c} \right \rfloor⌊ck​⌋个数 ...

  4. springboot同时使用thymeleaf和jsp模板

    语言:javaEE 框架:springboot+thymeleaf.jsp模板引擎 背景:学习springboot过程中想同时使用thymeleaf和jsp访问(官方不建议) 步骤: 1)  在pom ...

  5. 第28章：MongoDB-索引--过期索引(TTL)

    ①过期索引(TTL) TTL索引是让文档的某个日期时间满足条件的时候自动删除文档,这是一种特殊的索引,这种索引不是为了提高查询速度的,TTL索引类似于缓存,缓存时间到了就过期了,就要被删除了 ②范例: ...

  6. 11-border(边框)

    边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样式,默认的有上下左 ...

  7. Linux上的TIME_WAIT和tcp_fin_timeout

    当Linux服务器的TIME_WAIT过多时,通常会想到去修改参数降低TIME_WAIT时长,以减少TIME_WAIT数量,但Linux并没有提供这样的接口,除非重新编译内核. Linux默认的TIM ...

  8. 安装BouncyCastle

    对于Windows而言 将bcprov-jdk16-146.jar 复制到C:\Program Files\Java\jre6\lib\ext和C:\jdk1.6.0\jre\lib\ext目录下: ...

  9. 20145232 韩文浩 《Java程序设计》第7周学习总结

    教材学习内容总结 就目前来说,即使标注为GMT(格林威治时间),实际上谈到的时间指的是UTC时间. 秒的单位定义时基于TAI.也就是铯原子辐射的振动次数. UTC考虑了地球自转越来越慢而有闰秒修正,确 ...

  10. stm32的gpio函数介绍

    一.gpio_init函数 void GPIO_Init(GPIO_TypeDef* GPIOx, GPIO_InitTypeDef* GPIO_InitStruct) 调用时的格式一般是例如 RCC ...