起因:
做了个滚动效果,除了自适应以外,都和腾讯AI开发平台的效果相似。
主要技术点:
1.动画淡入淡出切换图片
2.轮播滚动效果 + hover改变选中滚动状态
3.文字切换展示
1.动画淡入淡出切换图片(通过控制CSS来改变效果)
JS代码:
// 替换class达到淡入淡出的效果
fadeIn(e) {
e.className = "time-slider-item fadein";
}
fadeOut(e) {
e.className = "time-slider-item ";
}
// 替换class达到loading的效果
easeIn(e) {
e.className = "loading-line-progress loading-line-progress-select";
}
easeOut(e) {
e.className = "loading-line-progress ";
}
// 替换选中背景色
selectIn(e) {
e.className =
"time-slider-pagination-item time-slider-pagination-item-select";
}
selectOut(e) {
e.className = "time-slider-pagination-item ";
}
CSS代码:
// loading加载,宽度从 0-> 248
.loading-line-progress-select {
width: 248px;
transition: width 3s ease-in;
}
// 淡入效果
.fadein {
opacity: 100;
filter: alpha(opacity=100);
transition: opacity 1s linear;
}
// 选中改变颜色
.time-slider-pagination-item-select {
background-color: rgba(29, 245, 255, 0.15);
}
2.轮播滚动效果 + hover改变选中滚动状态
React对应的HTML代码:
<div className="time-slider">
<div className="time-slider-cover" id="time-slider-cover">
{this.state.info.map(function(item, index, array) {
return (
<div
cla