vue 的动画
1、vue 的动画流程分为enter，和leave分别对应以下两幅图
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<style>
.yf-enter, .yf-leave-to {
opacity: 0;
} .yf-enter-active, .yf-leave-active {
transition: opacity 2s;
}
</style>
<script src="./lib/vue.js"></script>
<script>
window.onload = function () {
let VM = new Vue({
el: '#outdiv',
data: {
content: 'this is test content',
show: false
},
methods: {
change() {
this.show = !this.show;
}
}
})
}
</script>
</head>
<body>
<div class="container" id="outdiv">
<!--如果没有指定name那么默认为v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active-->
<!--如果定义了name那么默认为name-enter,name-enter-to,name-enter-active,name-leave,name-leave-to,name-leave-active-->
<!--当show为true的时候，即enter时opacity被赋值为0，随着动画的进行，yf-enter被删除掉那么opacity为1，同时定义的transition便起作用了-->
<!--当show为false的时候，即leave时yf-leave的opacity为1，当动画进行时yf-leave-to的opacity为0，同时定义的transition便起作用了-->
<!--如果要定义顺序，那么可以添加mode='in-out'或者mode='out-in'这个通常在多个组件之间切换时运用-->
<transition name="yf">
<div class="jumbotron" v-if="show">{{content}}</div>
</transition>
<input type="button" value="切换" class="btn btn-primary" @click="change">
</div>
</body>
</html>
2、如果添加自定义动画，如引入animate.css动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<link rel="stylesheet" href="./lib/animate.css">
<style>
v-enter, v-leave-to {
opacity: 0;
} v-enter-active, v-leave-active {
transition: opacity 3s;
}
</style>
<script src="./lib/vue.js"></script>
<script>
window.onload = function () {
let VM = new Vue({
el: '#outdiv',
data: {
content: 'this is a text',
show: true },
methods: {
change() {
this.show = !this.show;
}
}
})
}
</script>
</head>
<body>
<div class="container" id="outdiv">
<!--添加自定义的类，那么enter-active-class与leave-active-class可以赋值自定义的类名-->
<!--如果需要指定刷新页面时的动画，那么需要指定两个类，appear与appear-active-class,用法同enter-active-class一样-->
<!--因为animate.css是keyframe动画，那么需要添加过渡动画，那么就需要添加默认的(name|v)-active-class这个类--->
<!--指定动画时长，如果以transition的动画时长为主，那么可以指定一个type值为transition毕竟animate.css的动画时长只有1s-->
<!--如果需要定义一个明确的动画时长，可以添加属性:duration="{enter:5000,leave:3000}"注意以毫秒为单位，更简单的写法就指定一个值表示进入和离开的时间:duration="3000"-->
<transition
type="transition"
appear
appear-active-class="animated zoomInDown v-enter-active"
enter-active-class="animated zoomInDown v-enter-active"
leave-active-class="animated zoomOutUp v-leave-active">
<div class="jumbotron" v-if="show">{{content}}</div>
</transition>
<input type="button" value="点击" class="btn btn-primary" @click="change">
</div>
</body>
</html>
3、指定js的动画
通过transition这个标签的6个钩子函数执行动画before-enter,enter,after-enter,before-leave,leave,after-leave注意在每个enter或者leave的时候,会传入两个参数一个是执行动画的本体一个是函数,执行完动画后执行这个函数表示动画已经执行完毕,其余的只有一个函数表示动画执行的本体.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<link rel="stylesheet" href="./lib/animate.css">
<script src="./lib/vue.js"></script>
<script src="./lib/jquery.js"></script>
<script>
window.onload = function () {
let VM = new Vue({
el: '#outdiv',
data: {
show: true,
content: 'this is test content'
},
methods: {
change() {
this.show = !this.show;
},
beforeEnter(elem) {
$(elem).css('display', 'none');
},
handleEnter(elem, done) {
$(elem).fadeIn(400, () => {
done();
});
},
afterLeave(elem) {
console.log('this is leave');
console.log(arguments);
}
}
})
}
</script>
</head>
<body>
<div class="container" id="outdiv">
<transition
@before-enter="beforeEnter"
@enter="handleEnter"
@after-leave="afterLeave"
>
<div class="jumbotron" v-if="show">{{content}}</div>
</transition>
<div class="form-group">
<div><input type="button" value="切换" class="btn btn-primary" @click="change"></div>
</div>
</div>
</body>
</html>
4、如果是多个组件，那么可以使用transition-group这个标签来处理
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<link rel="stylesheet" href="./lib/animate.css">
<script src="./lib/vue.js"></script>
<script>
window.onload = function () {
Vue.component('yf-test', {
props: {
list: {
type: Array,
required: false,
default() {
return []
}
}
},
template: '<ul class="list-group"><transition-group enter-active-class="animated zoomInUp"><li class="list-group-item" v-for="(value,index) of list" :key="index"><slot :data="value"></slot></li></transition-group></ul>'
}); let VM = new Vue({
el: '#outdiv',
data: {
count: 1,
list: []
},
methods: {
add() {
this.list.push(this.count++);
}
}
})
}
</script>
</head>
<body>
<div class="container" id="outdiv">
<div class="jumbotron">
<div class="row">
<div class="col-md-6">
<yf-test :list="list">
<template slot-scope="props">
<div>{{props.data}}</div>
</template>
</yf-test>
</div>
<div class="col-md-6">
<yf-test :list="list">
<template slot-scope="props">
<b>{{props.data}}</b>
</template>
</yf-test>
</div>
</div>
</div>
<input type="button" value="增加" class="btn btn-primary" @click="add">
</div>
</body>
</html>
5、如果需要在vue项目是使用
import animated from 'animate.css' // npm install animate.css --save安装，在引入 Vue.use(animated)
vue 的动画的更多相关文章
- 从零开始学 Web 之 Vue.js（五）Vue的动画
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue的动画组件（transition）
当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...
- vue学习指南：第十篇(详细) - Vue的 动画
Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1. .v-enter定义动画的开始状态 2. .v-ente ...
- Vue.js动画在项目使用的两个示例
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...
- [原]浅谈vue过渡动画,简单易懂
在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解
- Vue.js 动画
transition 动画: 当插入或删除包含在 transition 组件中的元素时,Vue将会做以下处理: 1.自动嗅探目标元素是否应用了css过滤或动画,如果是,在恰当的时机添加/删除c ...
- vue过渡动画
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
- router使用以及vue的动画效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- icon图标制作网站推荐
推荐链接 easyicon
- P2709 小B的询问（莫队入门）
题目链接:https://www.luogu.org/problemnew/show/P2709 题目大意:中文题目 具体思路:莫队入门题,按照离线的方式打的,对每一个区间进行分块和编号,如果在同一个 ...
- 课程8：《Maven精品教程视频》--视频目录
2017年3月18日 老师讲的课程 \day01视频\01maven依赖管理.avi; \day01视频\02maven项目构建.avi; \day01视频\03maven程序安装.avi; \day ...
- linux(ubuntu) python 版本切换
参考链接:https://blog.csdn.net/thankyou0/article/details/79610854
- 启动项目时，mapper.xml文件没有导入
原因分析:绑定的statement没有发现,原因是只有mapper接口的java文件,没有xml文件 解决方法:需要在pom文件中进行配置 <!-- 如果不添加此节点mybatis的mapper ...
- springboot配置server相关配置&整合模板引擎Freemarker、thymeleaf&thymeleaf基本用法&thymeleaf 获取项目路径 contextPath 与取session中信息
1.Springboot配置server相关配置(包括默认tomcat的相关配置) 下面的配置也都是模板,需要的时候在application.properties配置即可 ############## ...
- js变量的解构赋值
今天在学习时看到几段代码,让我感叹JS的灵活,特此一记: let stateObj = {a:1,b:3}; let newObj = {b:13,c:4} ; stateObj = {...stat ...
- Python运维开发基础02-语法基础【转】
上节作业回顾(讲解+温习60分钟) #!/bin/bash #user login User="yunjisuan" Passwd="666666" User2 ...
- I/O 模型
5种I/O模型的基本区别: 阻塞式I/O 非阻塞式I/O I/O复用 信号异步模型 异步I/O 1. 阻塞 I/O 最流行的I/O模型是阻塞I/O模型,缺省情形下,所有套接口都是阻塞的.我们以数据报套 ...
- JavaScript 删除某个数组中指定的对象
返回对象在数组中的下标: _arr表示一个Array数组,里面包括了很多的对象如下图: _obj表示某一个数组对象 function getIndex (_arr,_obj) { var le ...