本着想学习写自定义指令的初衷，当遇到这个需求时，便想以此为契机写一个v-carousel的指令，来实现轮播图的效果。后来发现，用vue自带的“过渡&动画”就能够基本实现。
过渡动画的实现依靠vue封装的两个组件：
- 单元素/单组件/多元素/多组件过渡（单个节点或同一时间渲染多个节点中的一个），<transition></transtion>。
- 列表过渡，<transition-group></transition-group>。考虑到我们是实现多个图片的轮播，可以跳过直接看 => 列表过渡
其实，用vue内置组件实现轮播图效果很简单，思路是根据图片的索引(idx)用v-show来进行控制显示和隐藏。相比于往常通过控制外层ul元素的translateX值来达到轮播效果，它只通过当前显示的和即将显示的两个元素的translateX值来实现。
实现这个“轮播”效果的关键在于理解transition组件内部css过渡类名的含义，并为其书写相应的css。
image.png
过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换。常用的是v-enter, v-enter-active, v-leave, v-leave-active这四个。其中"v"可以被自定义的name取代。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
在我们实现（自右向左）轮播的效果中，对应css类名的css规则如下:
/* 注意顺序不能错乱，-active的类名要配置在-enter类名之前 */
.carousel-enter-active {
transform: translateX(0);
transition: all 1s ease-in-out;
}
.carousel-leave-active {
transform: translateX(-100%);
transition: all 1s ease-in-out;
}
.carousel-enter {
transform: translateX(100%)
}
.carousel-leave {
transform: translateX(0)
}
//另外，li要添加position:absolute这个属性，它相对于carousel绝对定位。
对应的html结构:
<transition-group tag="ul" name="carousel">
<li v-for="(item, idx) in mybanner" :key="idx" v-show="idx===mark">
<a href="" class="bannera">
<img :src="item.banner" alt="">
</a>
</li>
</transition-group>
<div class="bullet">
<span v-for='(item,idx) in mybanner.length' :class="{'active':idx===mark}" @click='change(index)'></span>
</div>
逻辑处理:
methods: {
change(i) {
this.mark = i
},
autoPlay() {
this.mark++
if (this.mark === this.len) { //len在data中定义了，为banner的个数
this.mark = 0
return
}
},
play() {
setInterval(this.autoPlay, 3000)
}
}
至此，结合vue内置组件<transition-group>实现图片轮播的过渡效果基本完成。用 transition系列 实现过渡效果，代码量较少，对于不复杂的需求可以轻松实现。
然而，若需要实现手指滑动-->图片轮播这种效果，单靠这个组件没有办法实现；另外，图片总是从右向左出现，不论是自动循环，还是点击了某张图，过渡效果是一样的，因为enter-active,leave-active样式是固定的。这不符合当我们点击某一张之前的图片，希望它从左往右出现的视觉逻辑。
于此，我们可以尝试手写一个vue轮播图指令。
第一版蹩脚的尝试😁，思路还是老旧的那种（不同于上面），“轮播”主要是通过改变外层ul元素的translateX值来达到效果:
directives: {
carousel: {
bind: function (el, binding, vnode, oldVnode) {
el.classList.add('flex', 'transition');
el.style.transform = 'translateX(-750px)'; // 初始化
let w = parseInt(el.style.width);
let n = Number(w/750), m = 1;
// 向左轮播
const carousel = function () {
if (m == n) {
el.style.transform = 'translateX(-750px)';
el.classList.remove('transition');
m = 1;
} else if (m == 0) {
el.style.transform = 'translateX(' + -750 * (n-1) + 'px)';
el.classList.remove('transition');
m = n-1;
} else {
el.classList.add('transition');
el.style.transform = 'translateX(' + -750 * (m) + 'px)';
m++;
}
}
setInterval(()=>{
carousel()
}, 3000)
}
}
}
.flex {
display: flex;
}
.transition {
transition: transform .5s linear;
}
<ul :style="{width: ULwidth + 'px'}" v-carousel>
<li v-for="(item, idx) in mybanner" v-if="idx === (mybanner.length - 1)">
<a class="bannera" href="" :data-form="item.form" :data-actCode="item.actCode">
<img :src="item.banner" alt="">
</a>
</li>
<li v-for="(item, idx) in mybanner">
<a class="bannera" href="" :data-form="item.form" :data-actCode="item.actCode">
<img :src="item.banner" alt="">
</a>
</li>
<li v-for="(item, idx) in mybanner" v-if="idx === 0">
<a class="bannera" href="" :data-form="item.form" :data-actCode="item.actCode">
<img :src="item.banner" alt="">
</a>
</li>
</ul>
至此，基本实现了自动播放轮播效果，下一版本想着改变思路来做了。代码还是放在这记录一下，算是思路的轨迹....
😂😂😂😂😂😂
未完待续...
网友评论