VUE2 第五天学习--过渡效果

阅读目录

1.理解VUE---过渡效果

回到顶部

1.理解VUE---过渡效果

1. 过渡的-css-类名
会有4个(css) 类名在 enter/leave 在过渡中切换。
1. v-enter: 进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
2. v-enter-active: 进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
3. v-leave 离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
4. v-leave-active 离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
看如下图所示：

在enter/leave 过渡中切换的类名，v- 是类名的前缀，使用 <transition name="my-transition"> 可以重置前缀，比如 v-enter 替换为 my-transition-enter。
看如下demo

<!DOCTYPE html>
<html><head><title>演示Vue</title><style>.fade-enter-active, .fade-leave-active {transition: opacity .5s}.fade-enter, .fade-leave-active {opacity: 0}</style></head><body><div id='app'><button v-on:click="show = !show">toggle</button><transition name='fade'><p v-if="show">hello</p></transition></div></body><script src="./vue.js"></script><script type="text/javascript">new Vue({el: '#app',data: {show: true}})</script>
</html>

查看效果

如上代码；给transition标签定义了一个name属性，因此过渡的css类名中的前缀v被替换成fade，定义了 .fade-enter-active, .fade-leave-active {transition: opacity .5s } 过渡动画，定义进入过渡的结束状态和离开过渡的结束状态为透明度0 在0.5s之内完成。

我们还可以定义如下的css，实现动画，如下css代码：

.fade-enter-active {transition: all .5s ease;
}
.fade-leave-active {transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-enter, .fade-leave-active {transform: translateX(10px);opacity: 0;
}

查看效果

2. css动画
css动画用法同css过渡一样，区别是在动画中 v-enter 类名在节点插入DOM后不会立即删除，而是在animationend事件触发时删除。如下代码也可以用在css动画下。

<!DOCTYPE html>
<html><head><title>演示Vue</title><style>.fade-enter-active {animation: fade-in .5s;}.fade-leave-active {animation: fade-out .5s;}@keyframes fade-in {0% {transform: scale(0);}50% {transform: scale(1.5);}100% {transform: scale(1);}}@keyframes fade-out {0% {transform: scale(1);}50% {transform: scale(1.5);}100% {transform: scale(0);}}</style></head><body><div id='app'><button v-on:click="show = !show">toggle</button><transition name='fade'><p v-if="show">hello</p></transition></div></body><script src="./vue.js"></script><script type="text/javascript">new Vue({el: '#app',data: {show: true}})</script>
</html>

查看效果

3. 自定义过渡类名
上面的四个过渡类名都是根据transition的name属性自动生成的，下面我们可以通过以下特性来自定义过渡类名。

enter-class
enter-active-class
leave-class
leave-active-class

以上的优先级都高于普通类名，通过以上的我可以自定义类名写不同的样式了，如下代码：
如下使用的animate.css里面的样式实现动画：如下代码：

<!DOCTYPE html>
<html><head><title>演示Vue</title><link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css"></head><body><div id='app'><button v-on:click="show = !show">toggle</button><transitionname="custom-classes-transition"enter-active-class="animated tada"leave-active-class="animated bounceOutRight"><p v-if="show">hello</p></transition></div></body><script src="./vue.js"></script><script type="text/javascript">new Vue({el: '#app',data: {show: true}})</script>
</html>

查看效果

4. 多个组件的过渡
多个组件的过渡可以使用动态组件实现，如下代码：

<!DOCTYPE html>
<html><head><title>演示Vue</title><style>.component-fade-enter-active, .component-fade-leave-active {transition: opacity .3s ease;}.component-fade-enter, .component-fade-leave-active {opacity: 0;}</style></head><body><div id='app'><input v-model='view' type='radio' value='v-a' name="view" /><label for='a'>A</label><input v-model='view' type='radio' value='v-b' name='view' /><label for='b'>B</label><transition name='component-fade' mode='out-in'><component v-bind:is='view'></component></transition></div></body><script src="./vue.js"></script><script type="text/javascript">new Vue({el: '#app',data: {view: 'v-a'},components: {'v-a': {template: '<div>Component A</div>'},'v-b': {template: '<div>Component B</div>'}}})</script>
</html>

查看效果

5. javascript钩子函数
除了使用css过渡的动画来实现vue的组件过渡，还可以使用javascript钩子函数来实现。在钩子函数中直接操作dom。我们在属性中声明如下钩子。
代码如下：

<transitionv-on:before-enter='beforeEnter'v-on:enter='enter'v-on:after-enter='afterEnter'v-on:enter-cancelled='enterCancelled'v-on:before-leave='beforeLeave'v-on:leave='leave'v-on:after-leave='afterLeave'v-on:leave-cancelled='leaveCancelled'
>
</transition>
new Vue({el: '#app',data: {view: 'v-a'},methods: {// 过渡进入 设置过渡进入之前的组件状态beforeEnter: function(el) {},// 设置过渡进入完成时的组件状态enter: function(el, done) {//
      done()},// 设置过渡进入完成之后的组件状态afterEnter: function(el) {// ....
    },enterCancelled: function(el) {// ...
    },// 过渡离开 设置过渡离开之前的组件状态beforeLeave: function(el) {// 。。。。
    },// 设置过渡离开完成时的组件状态leave: function(el, done) {// ...
      done()},// 设置过渡离开完成之后的组件状态afterLeave: function(el) {// ......
    },leaveCancelled: function(el) {// ....
    }}
})

注意：
1. 只用 JavaScript 过渡的时候，在 enter 和 leave 中，回调函数 done 是必须的。否则，它们会被同步调用，过渡会立即完成。
2. 推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
下面是vue教程上Velocity.js的一个demo，如下代码：

<!DOCTYPE html>
<html><head><title>演示Vue</title><style></style></head><body><div id='app'><button @click="show=!show">toggle</button><transitionv-on:before-enter='beforeEnter'v-on:enter='enter'v-on:leave='leave'v-bind:css='false'><p v-if='show'>Demo</p></transition></div></body><script src="./vue.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script><script type="text/javascript">new Vue({el: '#app',data: {show: true},methods: {// 过渡进入 设置过渡进入之前的组件状态
        beforeEnter: function(el) {el.style.opacity = 0el.style.transformOrigin = 'left'},// 设置过渡进入完成时的组件状态
        enter: function(el, done) {Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })Velocity(el, { fontSize: '1em' }, { complete: done })},// 设置过渡离开完成时的组件状态
        leave: function(el, done) {Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })Velocity(el, { rotateZ: '100deg' }, { loop: 2 })Velocity(el, {rotateZ: '45deg',translateY: '30px',translateX: '30px',opacity: 0}, { complete: done })}}})</script>
</html>

查看效果

理解过渡模式：
如下demo

<!DOCTYPE html>
<html><head><title>演示Vue</title><style>.no-mode-fade-enter-active, .no-mode-fade-leave-active {transition: opacity .5s}.no-mode-fade-enter, .no-mode-fade-leave-active {opacity: 0;}</style></head><body><div id='app'><transition name='no-mode-fade'><button v-if='on' key='on' @click='on=false'>on</button><button v-else='' key='off' @click='on=true'>off</button></transition></div></body><script src="./vue.js"></script><script type="text/javascript">new Vue({el: '#app',data: {on: false}})</script>
</html>

查看效果

运行一下，在上面的on按钮和 off按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另一个开始进入过渡。这是 <transition> 的默认行为 - 进入和离开同时发生。
但是我们在元素绝对定位在彼此之上的时候运行正常：如下代码：

<!DOCTYPE html>
<html><head><title>演示Vue</title><style>.wrap {position: relative;height: 18px;}.wrap button {position: absolute;}.no-mode-fade-enter-active, .no-mode-fade-leave-active {transition: opacity .5s}.no-mode-fade-enter, .no-mode-fade-leave-active {opacity: 0;}</style></head><body><div id='app'><div class='wrap'><transition name='no-mode-fade'><button v-if='on' key='on' @click='on=false'>on</button><button v-else='' key='off' @click='on=true'>off</button></transition></div></div></body><script src="./vue.js"></script><script type="text/javascript">new Vue({el: '#app',data: {on: false}})</script>
</html>

查看效果

我们加上 translate 让它们运动像滑动过渡：代码如下：

<!DOCTYPE html>
<html><head><title>演示Vue</title><style>.wrap {position: relative;height: 18px;}.wrap button {position: absolute;}.no-mode-fade-enter-active, .no-mode-fade-leave-active {transition: all 1s}.no-mode-fade-enter, .no-mode-fade-leave-active {opacity: 0;}.no-mode-fade-enter {transform: translateX(31px);}.no-mode-fade-leave-active {transform: translateX(-31px);}</style></head><body><div id='app'><div class='wrap'><transition name='no-mode-fade'><button v-if='on' key='on' @click='on=false'>on</button><button v-else='' key='off' @click='on=true'>off</button></transition></div></div></body><script src="./vue.js"></script><script type="text/javascript">new Vue({el: '#app',data: {on: false}})</script>
</html>

查看效果

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了过渡模式
in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
用 out-in 重写之前的开关按钮过渡：如下代码：

<!DOCTYPE html>
<html><head><title>演示Vue</title><style>.no-mode-fade-enter-active, .no-mode-fade-leave-active {transition: opacity .5s}.no-mode-fade-enter, .no-mode-fade-leave-active {opacity: 0;}</style></head><body><div id='app'><div class='wrap'><transition name='no-mode-fade' mode='out-in'><button v-if='on' key='on' @click='on=false'>on</button><button v-else='' key='off' @click='on=true'>off</button></transition></div></div></body><script src="./vue.js"></script><script type="text/javascript">new Vue({el: '#app',data: {on: false}})</script>
</html>

查看效果

in-out 滑动淡出demo如下：

<!DOCTYPE html>
<html><head><title>演示Vue</title><style>.wrap {position: relative;height: 18px;}.wrap button {position: absolute;}.no-mode-fade-enter-active, .no-mode-fade-leave-active {transition: all .5s}.no-mode-fade-enter, .no-mode-fade-leave-active {opacity: 0;}.no-mode-fade-enter {transform: translateX(31px);}.no-mode-fade-leave-active {transform: translateX(-31px);}</style></head><body><div id='app'><div class='wrap'><transition name='no-mode-fade' mode='in-out'><button v-if='on' key='on' @click='on=false'>on</button><button v-else='' key='off' @click='on=true'>off</button></transition></div></div></body><script src="./vue.js"></script><script type="text/javascript">new Vue({el: '#app',data: {on: false}})</script>
</html>

查看效果

5. VUE列表过渡实现轮播图
列表过渡使用 <transition-group> 组件，不同于 <transition>：
1. 它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
2. 内部元素总是需要提供唯一的 key 属性值。

<!DOCTYPE html>
<html><head><title>演示Vue</title><style>* { margin:0; padding:0;}.carousel-wrap {position: relative;height: 280px;width: 520px;overflow: hidden;// 删除background-color: #fff;}.slide-ul {width: 100%;height: 100%;}.slide-ul li {position: absolute;width: 100%;height: 100%;}.slide-ul li img {width: 100%;height: 100%;}.carousel-items {position: absolute;z-index: 10;bottom: 10px;width: 100%;margin: 0 auto;text-align: center;font-size: 0;}.carousel-items span {display: inline-block;height: 6px;width: 30px;margin: 0 3px;background-color: #b2b2b2;cursor: pointer;}.carousel-items span.active {background-color: red;}.list-enter-active {transition: all 1s ease;transform: translateX(0)}.list-leave-active {transition: all 1s ease;transform: translateX(-100%)}.list-enter {transform: translateX(100%)}.list-leave {transform: translateX(0)}</style></head><body><div id='carousel' class='carousel-wrap'><transition-group tag='ul' class='slide-ul' name='list'><li v-for='(list, index) in slideList' :key='index' v-show='index===currentIndex' @mouseenter='stop' @mouseleave='go'><a :href='list.href'><img :src='list.image' :alt='list.desc'></a></li></transition-group><div class='carousel-items'><span v-for="(item, index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)">{{index}}</span></div></div></body><script src="./vue.js"></script><script type="text/javascript">new Vue({el: '#carousel',data: {slideList: [{'href': '','desc': '1111','image': 'http://img.alicdn.com/tfs/TB1vHswQVXXXXXMXFXXXXXXXXXX-520-280.png_q90_.webp'},{'href': '','desc': '2222','image': 'http://img.alicdn.com/tfs/TB1c9kFQVXXXXcoXpXXXXXXXXXX-520-280.jpg_q90_.webp'},{'href': '','desc': '3333','image': 'https://aecpm.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg'}],currentIndex: 0,timer: ''},methods: {create: function() {var self = this;// DOM加载完成后，下个tick中开始轮播this.$nextTick(function(){self.timer = setInterval(function(){self.autoPlay();}, 4000)})},go: function() {var self = this;self.timer = setInterval(function(){self.autoPlay();},4000)},stop: function() {var self = this;clearInterval(self.timer);self.timer = null;},change: function(index) {this.currentIndex = index;},autoPlay: function() {this.currentIndex++;if(this.currentIndex > this.slideList.length - 1) {this.currentIndex = 0;}}}})</script>
</html>

查看效果

VUE2 第五天学习--过渡效果相关推荐

VUE2第五天学习---自定义指令
阅读目录 1.理解VUE中的自定义指令回到顶部 1.理解VUE中的自定义指令默认核心指令有 (v-model 和 v-show), 但是有时候我们需要用到自定义指令,在vue中,代码复用主要形式和 ...
vue2练习五个小例子笔记
https://segmentfault.com/a/1190000008436978 主题 Vue.js vue2练习五个小例子笔记多练习,多撸代码,多进步. 基于vue2 1.双向数据绑定 &l ...
JAVA 第五周学习总结
20175304 2018-2019-2 <Java程序设计>第五周学习总结教材学习内容总结 Java为什么要定义接口:接口的作用是实现多重继承,因为一个子类只能继承一个父类,但是可以实 ...
直博清华的小姐姐！本科就发表了SCI，享受朝九晚五的学习生活，做自己的小太阳！...
来源:北京科技大学.中国大学生网章宇娟北京科技大学冶金与生态工程学院冶金工程专业2017级本科生曾任冶金与生态工程学院学生会主席专业排名第一,综合加权成绩95.5分曾获国家奖学金,北京市优 ...
20162303 2016-2017-2 《程序设计与数据结构》第五周学习总结
20162303 2016-2017-2 <程序设计与数据结构>第五周学习总结教材学习内容总结类可能包含许多对象,对象有一个状态由属性来定义,对象的行为由相关的操作来定义. 每个类代表 ...
20135219洪韶武——信息安全系统设计基础第五周学习总结
信息安全系统设计基础第五周学习总结学习任务:教材第四章[处理器体系结构] 学习时间:10小时一.教材知识点梳理[4.1-4.3] 1.ISA[指令集体系结构] 一个处理器支持的指令和指令的字节级 ...
20159206《网络攻防实践》第五周学习总结
20159206<网络攻防实践>第五周学习总结教材学习内容总结本周教材主要学习了第十一章和第十二章. 第十一章主要讲了WEB应用程序的安全攻防.首先介绍了WEB应用程序和WEB应用体系 ...
201621123021《JAVA程序设计》第五周学习总结
201621123021<JAVA程序设计>第五周学习总结 1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词接口.comparator接口.comparable接口 ...
20145315 《Java程序设计》第五周学习总结
20145315 <Java程序设计>第五周学习总结教材学习内容总结第八章 8.1语法与继承架构 8.1.1使用try,catch 所有的错误都会被打包为对象,使用try,catch可 ...

VUE2 第五天学习--过渡效果

VUE2 第五天学习--过渡效果相关推荐

最新文章

热门文章