vue transition之slide(fade)效果
使用vue transition标签来完成组件的过渡效果，本文模拟slide效果，也夹杂了淡隐淡出(fade)效果。
结合
html部分
<div class="wrapper"><div class="left-btn" @click="animationName = 'right-slide'; index ++"><span class="iconfont blog-leftarrow">span>div><div class="content"><transition :name="animationName"><component :is="componentName" :key="index + new Date().getTime()">component>transition>div><div class="right-btn" @click="animationName = 'left-slide'; index ++"><span class="iconfont blog-rightarrow">span>div>
div>
transition 有个mode，可以设置为‘out-in’ 或者‘in-out’
- out-in：在前一个组件离开之后下一个组件开始进入
- in-out：下一个组件进入，前一个组件才离开
js部分
import tranItem from './tran-item'
export default {data () {return {index: 0, // 此处index只是为了触发component重新渲染，实际项目中 :key 可以绑定item.idcomponentName: 'tranItem',animationName: 'left-slide'}},components: {tranItem}
}
css部分
.wrapper {position: relative;top: 200px;width: 70%;margin: 0 auto;display: flex;
}
.content{flex: 1;position: relative;height: 200px;overflow: hidden;
}
.left-btn, .right-btn{position: relative;width: 50px;text-align: center;line-height: 100%;
}
.left-btn:active .iconfont, .right-btn:active .iconfont{color: #aaaaaa;
}
.left-slide-enter, .right-slide-leave-to{opacity: 0;transform: translateX(100%);
}
.left-slide-leave-to, .right-slide-enter{opacity: 0;transform: translateX(-100%);
}
.left-slide-enter-active, .left-slide-leave-active,
.right-slide-enter-active, .right-slide-leave-active{transition: opacity ease .9s,transform ease .9s;
}
[name]-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态)
[name]-enter-to:2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
[name]-enter-active:进入过渡的结束状态，元素被插入时就生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
[name]-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
[name]-leave-to:2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
[name]-leave-active:离开过渡的结束状态，元素被删除时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
子组件
<template><div class="item">div>
template><script>
export default {}
script><style>.item{position: absolute;width: 100%;height: 100%;background-color: aquamarine;}
style>
实际项目item内容可以放在子组件中，此处占位
最终效果
将css中的opacity去掉，可以看出来就是轮播效果（给item加个边框比较好看效果）~ 效果如下
以上就是本次vue-transition的内容~
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！