vue过渡
vue在插入、更新或者移除DOM时，提供了多种不同方式的应用过渡效果，下面主要总结一些常用的过渡。
单元素过渡（vue1.0）
我们常用的动画是css3的动画，在vue中依旧有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
#div1{
width:100px;
height:100px;
background: red;
}
.fade-transition{
transition: 1s all ease;
}
.fade-enter{
opacity: 0;
}
.fade-leave{
opacity: 0;
transform: translateX(200px);
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" v-show="bSign" transition="fade"></div>
</div> <script>
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
}
});
</script>
</body>
</html>
在上面的例子中，我们实现了一个进入和离开的动画效果，我们需要做如下几步：
- 在需要使用动画的元素中添加名称，即上面的div中添加transition="fade"
- 根据添加的名称为元素添加class类实现动画效果，这些类必须以上一步总的名称开头
- 借用v-show进行条件展示
- 通过事件触发动画
过渡组件（vue2.0）
除了上面为元素添加动画名称的方式实现过渡外，vue还提供了transition的封装组件，在下列情况中，可以黑任何元素和组件添加进入或离开的过渡效果：
- 条件渲染（v-if）
- 条件展示（v-for）
- 动态组件
- 组件跟节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
</head>
<body>
<div id="box">
<button v-on:click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div> <script>
new Vue({
el:'#box',
data: {
show: true
}
});
</script>
</body>
</html>
在上面的例子中，我们将需要实现动画效果的元素包裹在transition组件中，vue会自动嗅探目标元素是否应用了css过渡或动画，如果是，则会在恰当的时机添加或删除css类名。
过渡组件类名
vue在进入/离开的过渡中提供了6个可供选择的class切换，下面的例子我们只使用到了4个，关于6个类名的使用，在官方文档中详细说明。
- fade-enter：初始状态
- fade-enter-active：元素显示出来的状态（变化成什么样子）
- fade-leave：同fade-enter
- fade-leave-active：元素消失离开的状态
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue</title>
<style>
p{
width:300px;
height:300px;
background: red;
}
.fade-enter-active, .fade-leave-active{
transition: 1s all ease;
} .fade-enter-active{
opacity:1;
width:300px;
height:300px;
}
.fade-leave-active{
opacity:0;
width:100px;
height:100px;
} .fade-enter,.fade-leave{
opacity:0;
width:100px;
height:100px;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show"> <transition name="fade">
<p v-show="show"></p>
</transition>
</div>
</body>
</html>
需要说明的是，因为我们在transition组件中为此组件添加了一个名称name="fade"，所以我们的类名都是以该名称开头的，同上一个例子一样需要保持一致，但是这个组件名称不是必须的，所以我们也可以不用为组件添加名称，那么此时的类名就需要以v-开头，即上面的.fade-enter就需要换成v-enter了。
过渡组件相关函数
在使用过渡组件实现动画时，为了能更好的实现想要的动画效果，vue2.0中针对动画的不同状态给出了不同的动画函数，并且每个函数都接收一个代表当前运动元素的参数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
p{
width:200px;
height:200px;
background: red;
}
.fade-enter-active, .fade-leave-active{
transition: 1s all ease;
} .fade-enter-active{
opacity:1;
width:200px;
height:200px;
}
.fade-leave-active{
opacity:0;
width:100px;
height:100px;
} .fade-enter,.fade-leave{
opacity:0;
width:100px;
height:100px;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
},
methods:{
beforeEnter(el){
console.log('动画enter之前');
},
enter(el){
console.log('动画enter进入');
},
afterEnter(el){
console.log('动画进入之后');
el.style.background='blue';
},
beforeLeave(el){
console.log('动画leave之前');
},
leave(el){
console.log('动画leave');
},
afterLeave(el){
console.log('动画leave之后');
el.style.background='red';
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show"> <transition name="fade"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter" @before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<p v-show="show"></p>
</transition>
</div>
</body>
</html>
过渡组件之多个元素
和单一的过渡组件不同的是，多个元素的过渡组件使用的是transition-group，并且需要给组件内的多个元素添加一个key用作标识符，如下所示：
但是更多的时候，这个key是循环出来的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
p{
width:80px;
height:30px;
background: red;
margin:10px auto;
text-align: center;
}
</style>
<script src="vue.js"></script>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<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>
<script>
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;
}
}
});
</script>
</body>
</html>
css动画库
Animate.css是一款常见的动画库，在html中经常被使用，我们在vue1.0中依旧可以通过引用的方式使用。
在使用第三方动画库的时候，我们还是和上面的例子一样通过添加类名来实现动画，只是这里的类名不再是我们自己写的类，而是直接使用第三库中的类名，这里稍微做了一点改变的是，我们是在vue中添加了一个transitions，然后将所有的动画名称集中写在了这个里面而已。
首先需要为元素添加一个class类为： class="animated"，然后再添加动画名称transition="bounce"，最后根据动画名称进行定义相关动画类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<link rel="stylesheet" href="bower_components/animate.css/animate.css">
<style>
#box{
width:400px;
margin: 0 auto;
}
#div1{
width:100px;
height:100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div> <script>
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
},
transitions:{ //定义所有动画名称
bounce:{
enterClass:'zoomInLeft',
leaveClass:'zoomOutRight'
}
}
});
</script>
</body>
</html>
但是在vue2.0中，使用上稍微有点不同，具体的有两种实现方式，分别如下所示：
vue过渡的更多相关文章
- 050——VUE中使用js库控制vue过渡动作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- Vue过渡和动画效果展示（案例、GIF动图演示、附源码）
前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...
- Vue过渡mode属性踩坑
近期学习Vue的过渡效果的时候,mode属性的"in-out"."out-in"设置了不起作用,官网上的例子让我看了有点迷,问题解决后以此文记录之. 首先我们看 ...
- vue过渡动画
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
- Vue过渡状态
前面的话 Vue 的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢?包括数字和运算.颜色的显示.SVG 节点的位置.元素的大小和其他的属性等.所有的原始数字都被 ...
- Vue过渡动画—Vue学习笔记
要求:要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中. 原理:通过在特定的时刻增加/移除样式实现. ...
- Vue 过渡
过渡 通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数 ...
- vue 过渡状态
vue的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢,例: 数字和运算 颜色的显示 svg节点的位置 元素的大小和其他的属性 所有的原始数字都被事先存储起来, ...
随机推荐
- js 调用 手机 相机摄像机麦克风
https://www.cnblogs.com/avon/p/5996368.html
- uboot2014.10移植(一)
最新有点时间,所以想折腾点东西,于是拿起了几年前的TQ2440玩玩,下载了uboot2014.10版本,准备移植到板子上去,没想到折腾环境都折腾了一下午. 1.工具链安装 我的工具链直接用命令安装的: ...
- 【SpringCloud】初识springCloud
转载来源:https://maimai.cn/article/detail?fid=1149221357&efid=lL_Z3WzTyUDLAjQwrNrIsw 概述 毫无疑问,Spring ...
- How_Require_Extensions_Work
Why Doing require extensions correctly is essential, because: Users should be able to install multip ...
- mtail 部署说明
了解一个工具最好的方式是先--help 下,看看支持的命令以及参数 启动mtail 最基本的参数: --logs 支持需要处理的log 文件,支持通过glob 模式的额查找,可以指定多次 --prog ...
- 使用patroni 构建高可用的pg 数据库
patroni 是一个基于zk.etcd .consul 等的pg ha 模版,我们可以使用这个工具,快速的搭建一套 pg 的高可用方案 环境准备 mac 操作系统 安装基础差组件 brew inst ...
- KMPlayer速度步进设置及快捷键设置和同级视频自动加入播放列表
速度步进设置 快捷键设置 同级视频自动加入播放列表
- 拷贝某个区间（copy，copy_back）
copy 为outputIterator中的元素赋值而不是产生新的元素,所以outputIterator不能是空的 如要元素安插序列,使用insert成员函数或使用copy搭配insert_itera ...
- 开发 FastAdmin 时见识到 php opcache 厉害
开发 FastAdmin 时见识到 php opcache 厉害 FastAdmin 的插件配置是写在 config.php 中的. 我在修改配置时发现加了空格,然后再重新打开配置页发现空格没有配置面 ...
- Windows git 初始设置
主要布署在 Linux 服务器上时,将全局设置 为提交自动转为 LF,签出不转换.git config --global core.autocrlf input(无效了,按默认即可) 设置全局用户名.