Vue实现内部组件轮播切换效果的示例代码(4)
第1个component用来显示偶数的slide，第2个是用来显示奇数的slide（分别用一个evenIndex和oddIndex代表），如果nextIndex是偶数的，那么偶数的component就会有一个next-task的类，反之则亦然。然后在下一题按钮的响应函数里面改变这几个index的值：
methods: {
nextQuestion() {
this.currentIndex = (this.currentIndex + 1)
% this.questions.length;
this._slideToNext();
},
// 切到下一步的动画效果
_slideToNext() {
}
}
nextQuestion函数可能还有其它一些处理，在它里面调一下_slideToNext函数，这个函数的实现如下：
_slideToNext() {
// 当前slide的类型（currentIndex已经加1了，这里要反一下）
let currentType = this.currentIndex % 2 ? "even" : "odd",
// 下一个slide的类型
nextType = this.currentIndex % 2 ? "odd": "even";
// 获取下一个slide的dom元素
let $nextSlide = this.$refs[`${nextType}Task`].$el;
$nextSlide.style.display = "block";
// 把下一个slide的translate值置为0，原本是translateX(100%)
$nextSlide.style.transform = "translateX(0)";
// 等动画结束后更新数据
setTimeout(() => {
this.nextIndex = (this.currentIndex + 1)
% this.questions.length;
// 原本的next是当前显示的slide
this[`${nextType}Index`] = this.currentIndex;
// 而原本的current slide要显示下下张的内容了
this[`${currentType}Index`] = this.nextIndex;
}, 500);
}
代码把下一个slide的display改成block，并把它的translateX的值置为0，这个时候不能马上更新数据触发DOM更新，要等到下一个slide移过去的动画结束之后再开始操作，所以加了一个setTimeout，在回调里面调换nextTask的类，加到原本的current slide，并把它的内容置成下下张的内容。这些都是通过改变相应的index完成的。
这样基本上就完成了，但是我们发现一个问题，切是切过去了，就是没有动画效果。这个是因为从display: none变到display: block是没有动画的，要么改成visibility: hidden到visible，要么触发动画的操作加到$nextTick或者setTimeout 0里面，考虑到性能问题，这里使用第二种方案：
$nextSlide.style.display = "block";
// 这里使用setimeout，因为$nextTick有时候没有动画，非必现
setTimeout(() => {
$nextSlide.style.transform = "translateX(0)";
// ...
}, 0);
经过这样的处理之后，点下一题就有动画了，但是又发现一个问题，就是偶数的next-task会被盖住，因为偶数的是使用第一个component，它是会被第二个compoent盖住的，所以需要给它加一个z-index：
.next-task {
display: none;
transform: translateX(100%);
transition: transform 0.5s ease;
z-index: 2;
}
内容版权声明：除非注明，否则皆为本站原创文章。