Vue中添加过渡效果的方法
更新时间：2017年03月16日 10:21:31 作者：HNS
本篇文章主要介绍了Vue中添加过渡效果的方法，Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，有兴趣的同学可以了解一下。
关于vue的过渡效果，vue官方给的概述是这样的。
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
1、在 CSS 过渡和动画中自动应用 class
2、可以配合使用第三方 CSS 动画库，如 Animate.css
3、在过渡钩子函数中使用 JavaScript 直接操作 DOM
4、可以配合使用第三方 JavaScript 动画库，如 Velocity.js
其中里面也给出了许多的例子，但是例子给到了“多个元素过渡”的时候，就没有案例的代码了，在这里对vue官方文档的这部分案例做一部分补充。
以下我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../js/vue.js" charset="utf-8"></script>
<title>过渡效果-多个元素的过渡</title>
<style>
/*淡入淡出按钮,这个使得按钮的效果很差*/
/*在 “on” 按钮和 “off” 按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另一个开始进入过渡。这是 <transition> 的默认行为 - 进入和离开同时发生。*/
.fade-enter-active,.fade-leave-active{
transition: all .5s
}
.fade-enter,.fade-leave-active{
opacity: 0
}
/*淡入淡出+绝对定位*/
#app2{
position: relative;
height: 100px;
width: 100px;
background:green;
}
#app2 button{
position: absolute;
left:50%;
top: 50%;
}
.fade-abosolute-enter,.fade-abosolute-leave-active{
opacity: 0
}
.fade-abosolute-enter-active,.fade-abosolute-leave-active{
transition: all 1s
}
/*淡入淡出+绝对定位+滑动效果*/
/*这三种效果合在一起，产生的效果是比较好的*/
#app3{
width: 200px;
height: 100px;
background: rgb(26, 46, 224);
position: relative;
}
#app3 button{
position: absolute;
left: 50%;
top: 50%;
}
.fade-slide-enter-active,.fade-slide-leave-active{
transition: all 1s
}
.fade-slide-enter{
opacity: 0;
transform: translateX(30px);
}
.fade-slide-leave-active{
opacity: 0;
transform: translateX(-30px);
}
#app4{
position: relative;
width: 200px;
height: 100px;
background: rgb(8, 201, 80);
}
#app4 button{
position: absolute;
left: 50%;
top: 50%;
}
.fade-slide-mode-enter-active,.fade-slide-mode-leave-active{
transition: all .5s
}
.fade-slide-mode-enter{
opacity: 0;
transform: translateX(30px);
}
.fade-slide-mode-leave-active{
opacity: 0;
transform: translateX(-30px);
}
</style>
</head>
<body>
<!-- 淡入淡出按钮,这个使得按钮的效果很差 -->
<div id="app1">
<!-- 这个淡出淡出效果，在原本没加上过渡模式的时候效果非常糟糕，在加入了mode="out-in"之后，效果比较好，out-in指的是先过渡现有的元素，在过渡新元素 -->
<transition name="fade" mode="out-in">
<button v-if="isEditing" key="save" @click="isEditing = !isEditing">
save
</button>
<button v-else key="edit" @click="isEditing = !isEditing">
Edit
</button>
</transition>
</div>
<!-- 淡入淡出+绝对定位 -->
<div id="app2">
<transition name="fade-abosolute">
<button v-if="on" key="on" @click="on = !on">
on
</button>
<button v-else key="off" @click="on = !on">
off
</button>
</transition>
</div>
<!-- 淡入淡出+绝对定位+滑动 -->
<div id="app3">
<transition name="fade-slide">
<button v-if="on" key="on" @click="on = !on">
on
</button>
<button v-else key="off" @click="on = !on">
off
</button>
</transition>
</div>
<!-- in-out,out-in的过渡模式，同时生效的进入和离开的过渡不能满足所有要求，所以vue提供了过渡模式 -->
<div id="app4">
<transition name="fade-slide-mode" mode="in-out">
<button v-if="on" key="on" @click="on = !on">
on
</button>
<button v-else key="off" @click="on = !on">
off
</button>
</transition>
</div>
</body>
<script type="text/javascript">
var vm1 = new Vue({
el:'#app1',
data () {
return{
isEditing:true,
}
}
})
var vm2 = new Vue({
el:'#app2',
data () {
return {
on:true
}
}
})
var vm3 = new Vue({
el:'#app3',
data () {
return {
on:true
}
}
})
var vm4 = new Vue({
el:'#app4',
data () {
return {
on:true
}
}
})
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了key在Vue列表渲染时的原理和作用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-10-10
vue+elementUi实现点击地图自动填充经纬度以及地点
这篇文章主要为大家详细介绍了vue+elementUi实现点击地图自动填充经纬度以及地点，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了解决vue-socket.io接收不到数据问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
本文主要介绍了Vue项目打包部署到GitHub Pages的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要为大家详细介绍了vue.js表格分页示例，ajax异步加载数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了Vue中import与@import的区别及使用场景说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
本文主要介绍了vue 权限管理几种实现方法,权限需要前后端结合,前端尽可能的去控制,更多的需要后台判断,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
这篇文章主要介绍了vue-i18n实现中英文切换的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了vue filter的四种用法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue中多个有顺序要求的异步操作处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
最新评论