一.使用<transition name="fade"></transition>标签

name="fade", 是创建个fade的类名写在css中

  • CSS: 在进入/离开的过渡中,会有 6 个 class 切换。
  • 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 完成之后移除。

vue动画显示class机制
<p v-if="show" class="detial" >hello</p>

  • 1.先添加fade-enter类 // 初始状态
  • <p v-if="show" class="detial fade-enter" >hello</p>
  • 2.再添加fade-enter-active // 变化状态
  • <p v-if="show" class="detial fade-enter fade-enter-active" >hello</p>
  • 3.再添加fade-enter-to, 删除fade-enter // 变化后的状态
  • <p v-if="show" class="detial fade-enter-active fade-enter-to" >hello</p>
  • 4.再逐步删除fade-enter-to fade-enter-active
  • <p v-if="show" class="detial" >hello</p>

二.动画例子

html

<transition name="fade">
<p v-if="show" class="detial" >hello</p>
</transition>

css

.detial{width:300px;height:300px;background:red;}
// 过渡条件
.fade-enter-active, .fade-leave-active {
transition: all .3s ease;
}
// 开始结束状态
.fade-enter, .fade-leave-to{ /* .fade-leave-active below version 2.1.8 */
width:100px;height:100px;
opacity: 0;
}
// fade-leave-to可以换fade-leave-active, 在2.18以下版本

  

三.动画可以在属性中声明 JavaScript 钩子

<transition
//1.动画进入之前
v-on:before-enter="beforeEnter" //2.动画进入
v-on:enter="enter" //3.动画进入之后
v-on:after-enter="afterEnter" //动画进入时取消
v-on:enter-cancelled="enterCancelled" //4.动画消失之前
v-on:before-leave="beforeLeave" //5.动画消失
v-on:leave="leave" //6.动画消失之后
v-on:after-leave="afterLeave" //动画消失时取消
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>

  

四.JavaScript 钩子的进程

<template>
<div id="app">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition name="fade"
@before-enter="beforeEeter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
>
<div class="detial" v-show="show"></div>
</transition>
</div>
</template>

css

<style>
.detial{width:300px;height:300px;background:red;}
.fade-enter-active, .fade-leave-active {
transition: all 5s ease;
}
.fade-enter, .fade-leave-active{
width:100px;height:100px;
opacity: 0;
}
</style>

vue.js

<script>
export default {
name: 'app',
data () {
return {
show: false,
msg: 'Welcome to Your Vue.js App'
}
}, methods: {
beforeEeter(){
console.log("1.动画进入之前")
},
enter(){
console.log("2.动画进入...")
},
afterEnter(){
console.log("3.动画进入之后")
},
enterCancelled(){
console.log("动画进入时取消")
},
beforeLeave(){
console.log("4.动画消失之前")
},
leave(){
console.log("5.动画消失...")
},
afterLeave(){
console.log("6.动画消失之后")
},
leaveCancelled(){
console.log("动画消失时取消")
}
}
}
</script>

  

五.结合animate.css来使用

引入animate.css, 可以通过 bower 下载

$ bower install animate.css

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

npm下载

npm install animate.css --save

  

HTML, transition中必须添加animated类名

<template>
<div id="app">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition
enter-active-class="animated zoomInLeft"
leave-active-class="animated zoomOutRight"
>
<div class="detial" v-show="show"></div>
</transition>
</div>
</template>

控制时间快慢

<style lang="stylus" scoped>
.animated {animation-duration: 0.5s;}
</style>

六.多个元素一起运动

<transition-group></transition-group>

1.默认为一个 <span>包裹多个元素, 通过 tag 来改变: tag="div"
2.总是需要 提供唯一的 key 属性值" :key="1", v-bind:key="2"

<template>
<div id="app">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition-group tag="div"
enter-active-class="animated zoomInLeft"
leave-active-class="animated zoomOutRight"
>
<div class="detial" v-show="show" :key="1"></div>
<div class="detial" v-show="show" :key="2"></div>
</transition-group>
</div>
</template>

多个元素一起运动例子

<div id="box">
<input type="text" v-model="show"> <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated" v-for="(val,index) in lists" :key="index">
{{val}}
</p>
</transition-group>
</div>

js

new Vue({
el:'#box',
data:{
show:'',
list:['apple','banana','orange','pear']
},
computed:{
lists:function(){
var arr=[];
this.list.forEach(function(val){
if(val.indexOf(this.show)!=-1){
arr.push(val);
}
}.bind(this));
return arr;
}
}
});

  

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

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

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

  2. 从零开始学 Web 之 Vue.js(五)Vue的动画

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

  3. vue 的动画

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

  4. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue的动画组件(transition)

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

  6. vue学习指南:第十篇(详细) - Vue的 动画

    Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1.  .v-enter定义动画的开始状态 2.  .v-ente ...

  7. Vue.js 动画

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

  8. Vue.js动画在项目使用的两个示例

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...

  9. [原]浅谈vue过渡动画,简单易懂

    在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解

随机推荐

  1. u3d 场景资源打包

    搞了一天终于搞定u3d的场景打包,这样就可以不用修改太多程序,把资源放在外部修改了.好处多多 但是本来很简单的东西搞了一天,google来的说作为场景scene.unity 文件 打包成 unityd ...

  2. iOS:PSTCollectionView

    https://github.com/steipete/PSTCollectionView Open Source, 100% API compatible replacement of UIColl ...

  3. git恢复本地删除的文件夹取消增加的文件

    git项目中有时候会在本地增加或者删除了一些文件或者文件夹,但是又不想提交,一般情况下,我们取消本地所有修改: git checkout . 取消指定文件修改: git checkout filena ...

  4. java stream Api

    Stream的简单使用 Stream的使用分为两种类型: Intermediate,一个Stream可以调用0到多个Intermediate类型操作,每次调用会对Stream做一定的处理,返回一个新的 ...

  5. 史上最强大的python selenium webdriver的包装

    1.之前已经发过两次使用单浏览器了,但是这个最完美,此篇并没有使用任何单例模式的设计模式,用了实例属性结果缓存到类属性. 2.最简单的控制单浏览器是只实例化一次类,然后一直使用这个对象,但每个地方运行 ...

  6. linux 按照端口一句命令杀死进程,按照进程名称一句命令杀死进程

    例如杀死nginx 按照程序名称杀死进程 例如杀死nginx的进程 ps -aux|grep nginx|grep -v grep|cut -c 9-15|xargs kill -9 或者 ps -a ...

  7. Linux+Redis实战教程_day02_Linux系统上安装MySQL

    Linux系统上安装MySQL 安装MySQL 卸载自带mysql 查询mysql的安装情况,可以直接使用了 rpm -qa | grep -i mysql –-color 卸载原生的MySQL rp ...

  8. CentOS 6.3下搭建Web服务器

    准备前的工作: 1.修改selinux配置文件(/etc/sysconfig/selinux) 关闭防火墙 (1)把SELINUX=enforcing注释掉 (2)并添加SELINUX=disable ...

  9. ios开发之--解决“Could not insert new outlet connection”的问题。

    在Xcode中,我们能够在StoryBoard编辑界面或者是xib编辑界面中通过“Control键+拖拽“的方式将某个界面元素和相应的代码文件连接起来.在代码文件里创建outlet. 只是.假设你的运 ...

  10. Android中显示照片的Exif信息

    package com.hyzhou.pngexifdemo; import android.media.ExifInterface; import android.os.Bundle; import ...