每次滚动到元素时,都显示加载动画,如何添加?
元素添加初始参数
以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部。
添加初始数据,默认透明度0、左右分别移动100px。
//左侧容器
.item-leftContainer {
opacity: 0;
transform: translateX(-100px);
}
//右侧容器
.item-rightContainer {
opacity: 0;
transform: translateX(100px);
}
添加动画数据
在less中添加动画数据。这里只设置了to,也可以省略第1步中的初始参数设置而在动画里设置from。
执行后,透明度由0到1,俩个容器向中间移动100px回到原处。
//动画
@keyframes showLeft {
to {
opacity: 1;
transform: translateX(0px);
}
}
@keyframes showRight {
to {
opacity: 1;
transform: translateX(0px);
}
}
@keyframes hideLeft {
to {