Vue实现过渡效果的示例分析-创新互联
小编给大家分享一下Vue实现过渡效果的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
以一个toggle按钮控制p元素显隐为例，如果不使用过渡效果，则如下所示
<div id="demo">
<button v-on:click="show = !show">Toggle</button>
<p v-if="show">蓝色理想</p>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>如果要为此加入过渡效果，则需要使用过渡组件transition
过渡组件Vue提供了transition的封装组件，下面代码中，该过渡组件的名称为'fade'
<transition name="fade"> <p v-if="show">蓝色理想</p> </transition>
当插入或删除包含在transition组件中的元素时，Vue会自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名
过渡类名总共有6个(CSS)类名在enter/leave的过渡中切换
v-enter定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除
v-enter-active定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition 或 animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数
v-enter-to定义进入过渡的结束状态。在元素被插入一帧后生效(与此同时 v-enter 被删除)，在 transition 或 animation 完成之后移除
v-leave定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除
v-leave-active定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition 或 animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数
v-leave-to定义离开过渡的结束状态。在离开过渡被触发一帧后生效(与此同时 v-leave 被删除)，在 transition 或 animation 完成之后移除
对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀，表示过渡组件的名称。比如，如果使用 <transition name="my-transition"> ，则 v-enter替换为 my-transition-enter
transition常用的Vue过渡效果都是使用CSS过渡transition，下面增加一个enter时透明度变化，leave时位移变化的效果
<style>
.fade-enter{
opacity:0;
}
.fade-enter-active{
transition:opacity .5s;
}
.fade-leave-active{
transition:transform .5s;
}
.fade-leave-to{
transform:translateX(10px);
}
</style>
<div id="demo">
<button v-on:click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">蓝色理想</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>animationCSS动画animation用法同CSS过渡transition，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除
下面例子中，在元素enter和leave时都增加缩放scale效果
<style>
.bounce-enter-active{
animation:bounce-in .5s;
}
.bounce-leave-active{
animation:bounce-in .5s reverse;
}
@keyframes bounce-in{
0%{transform:scale(0);}
50%{transform:scale(1.5);}
100%{transform:scale(1);}
}
</style>
<div id="demo">
<button v-on:click="show = !show">Toggle</button>
<transition name="bounce">
<p v-if="show">蓝色理想</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>同时使用Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果使用其中任何一种，Vue 能自动识别类型并设置监听。
但是，在一些场景中，需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，就需要使用 type 特性并设置 animation 或 transition 来明确声明需要 Vue 监听的类型
<style>
.fade-enter,.fade-leave-to{
opacity:0;
}
.fade-enter-active,.fade-leave-active{
transition:opacity 1s;
animation:bounce-in 5s;
}
@keyframes bounce-in{
0%{transform:scale(0);}
50%{transform:scale(1.5);}
100%{transform:scale(1);}
}
</style>
<div id="demo">
<button v-on:click="show = !show">Toggle</button>
<transition name="fade" type="transition">
<p v-if="show">蓝色理想</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true,
},
})
</script>自定义类名可以通过以下特性来自定义过渡类名
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
自定义类名的优先级高于普通的类名，这对于Vue的过渡系统和其他第三方CSS动画库，如 Animate.css 结合使用十分有用
<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css" rel="external nofollow" >
<div id="example">
<button @click="show = !show">
Toggle render
</button>
<transition name="xxx" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
<p v-if="show">蓝色理想</p>
</transition>
</div>
<script src="https://www.jb51.com/vue"></script>
<script>
new Vue({
el: '#example',
data: {
show: true
}
})
</script>初始渲染过渡可以通过 appear 特性设置节点的在初始渲染的过渡
<transition appear> <!-- ... --> </transition>
这里默认和进入和离开过渡一样，同样也可以自定义 CSS 类名
<transition appear appear-class="custom-appear-class" appear-to-class="custom-appear-to-class" appear-active-class="custom-appear-active-class" > <!-- ... --> </transition>
下面是一个例子
<style>
.custom-appear-class{
opacity:0;
background-color:pink;
transform:translateX(100px);
}
.custom-appear-active-class{
transition: 2s;
}
</style>
<div id="demo">
<button @click="reset">还原</button>
<transition appear appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class"
appear-active-class="custom-appear-active-class">
<p>蓝色理想</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
methods:{
reset(){
history.go();
}
}
})
</script>过渡时间在很多情况下，Vue可以自动得出过渡效果的完成时机。默认情况下，Vue会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，可以拥有一个精心编排的一序列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果
在这种情况下可以用<transition>组件上的duration属性定制一个显性的过渡效果持续时间 (以毫秒计)
下面的代码意味着元素在进入enter和离开leave时，持续时间都为1s，而无论在样式中它们的设置值为多少
<transition :duration="1000">...</transition>
也可以分别定制进入和移出的持续时间
<transition :duration="{ enter: 500, leave: 800 }">...</transition>比如，下面的代码中，进入和移出的效果都为animate.css里面的shake效果，但持续时间分别是0.5s和1s
<div id="demo">
<button v-on:click="show = !show">Toggle</button>
<transition :duration="{ enter: 500, leave: 1000 }" name="xxx" enter-active-class="animated shake" leave-active-class="animated shake">
<p v-if="show">小火柴的蓝色理想</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>过渡条件一般地，在Vue中满足下列任意一个过渡条件，即可添加过渡效果
条件渲染(使用v-if)常见的条件是使用条件渲染，使用v-if
<style>
.fade-enter,.fade-leave-to{
opacity:0;
}
.fade-enter-active,.fade-leave-active{
transition:opacity 1s;
}
</style>
<div id="demo">
<button v-on:click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">蓝色理想</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>条件展示(使用v-show)使用条件展示，即使用v-show时，也可以添加过渡效果
<div id="demo"> <button v-on:click="show = !show">Toggle</button> <transition name="fade"> <p v-show="show">蓝色理想</p> </transition> </div>动态组件
使用is属性实现的动态组件，可以添加过渡效果
<div id="demo">
<button v-on:click="show = !show">Toggle</button>
<transition name="fade">
<component :is="view"></component>
</transition>
</div>
<script>
new Vue({
el: '#demo',
components:{
'home':{template:'<div>蓝色理想</div>'}
},
data: {
show: true,
},
computed:{
view(){
return this.show ? 'home' : '';
}
}
})以上是“Vue实现过渡效果的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
网站名称：Vue实现过渡效果的示例分析-创新互联
网站链接：https://www.cdcxhl.com/article20/didico.html
成都网站建设公司_创新互联，为您提供网页设计公司、网站排名、电子商务、小程序开发、外贸网站建设、定制网站
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- 做好导入链接工作快速提升网站排名 2016-11-03
- 网上商城页面应该怎么优化? 2014-03-18
- 如何提升网站营销建设！ 2014-02-23
- SEO来帮助网站排名和有效流量 2015-01-01
- 网站的收录会对seo有什么影响？ 2013-06-06
- 如何发布有效链？SEO怎么能很快被收录？ 2013-05-21
- 如何来防止网站排名下降 2013-09-17
- SEO长尾关键词优化的注意事项 2015-04-30
- 旅游网站设计的原则和方法 2013-11-04
- 网站优化之长尾关键词优化的重要性 2016-11-11
- 网站排名刷点击流量内链优化最详细教程 2013-12-27
- 如何提升网站的收录量 2014-10-25