carousel(轮播图) 渐变效果

[kkll7766]

请问如何实现 点击事件之后 前一张图不变 后一张图从无到有进行渐变 从而覆盖前一张图

[kkll7766]

比如 slick 的 fade 无法做到第一张图保持不变

[lightening]

CSS transition: opacity

[rabbbit]

之前练手写的轮播图.写的不咋地,全当个参考吧.
项目地址 https://github.com/Aaron-Bird/bamboo
渐变效果 http://htmlpreview.github.io/?https://github.com/Aaron-Bird/bamboo/blob/master/demo/animation-fade.html

总之就是改变图层的 z-index,然后执行 CSS 动画
部分代码逻辑
if (index === -1) {
// 跳转到最后一张
index = this.slideList.length - 1;
} else if (index === this.slideList.length) {
// 跳转到第一张
index = 0;
}
// 隐藏所有图片,重置 z-index 为 0
for (var i = 0; i < this.slideList.length; i++) {
this.slideList[i].style.zIndex = '0';
this.slideList[i].style.visibility = 'hidden';
}
// 移除动画效果
var saveTransitionProperty = getComputedStyle(current, null).getPropertyValue('transition-property');
current.style.transitionProperty = 'none';
// 改变图片图层顺序
previous.style.zIndex = '1';
current.style.zIndex = '2';
// 隐藏上面的图片
current.style.opacity = '0';
// 显示图片
current.style.visibility = 'visible';
previous.style.visibility = 'visible';
// 强制刷新
current.style.display = document.defaultView.getComputedStyle(current)['display'];
// 加入动画效果
current.style.transitionProperty = saveTransitionProperty || 'all';
// 播放动画
current.style.opacity = '1';

[o0]

应该可以自己手动写样式覆盖，还不行的话最好换一个插件。

[kkll7766]

@rabbbit // 强制刷新
current.style.display = document.defaultView.getComputedStyle(current)['display'];
// 加入动画效果
current.style.transitionProperty = saveTransitionProperty || 'all';

[kkll7766]

@rabbbit 这操作 666 学习了 非常感谢！