一般咱写这东西的时候, 想的是新建10个div, 然后写个动画, 复制粘贴无脑调参数, 这样代码重复性极高, 所以这时候就得请出咱们的大杀器: less 的list function 也就是循环 首先先新建11个card, 众所周知, 10人小队一共有11人, 这也没啥好奇怪的, (第11是为了确定10个盒子的坐标点,) 确定好坐标后, 直接新建两个list
@top: 0rpx, 0rpx, 0rpx, 274rpx, 274rpx, 548rpx, 548rpx, 548rpx, 832rpx, 832rpx;
@left: 0rpx, 200rpx, 400rpx, 100rpx, 300rpx, 0rpx, 200rpx, 400rpx, 100rpx, 300rpx;
然后开始写循环吧
each(range(10), {
.image-@{index}{
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
opacity: 1;
transition: all .5s;
position: absolute;
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
width: 196rpx;
height: 270rpx;
animation: e(%('allin-%s', @index)) .5s linear; //动态渲染animation的名称
animation-delay: (50ms * @index);
animation-fill-mode: forwards;
}
@keyframes e(%('allin-%s', @index)){ //使用less的字符处理器去批量声明动画
0% {
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
opacity: 1;
}
10%{
opacity: 0;
}
100% {
opacity: 1;
top: extract(@top, @index); //设置坐标
left: extract(@left, @index); //设置坐标
}
}
})
以上, 代码简化完成, 对比下之前的代码, 那少了不是一点半点,(虽然编译出来的还是那么多css, 但是最起码自己看着舒服)
.image-1{
animation: allin-1 .5s linear;
}
.image-2{
animation: allin-2 .5s linear;
}
.image-3{
animation: allin-3 .5s linear;
}
.image-4{
animation: allin-4 .5s linear;
}
.image-5{
animation: allin-5 .5s linear;
}
.image-6{
animation: allin-6 .5s linear;
}
.image-7{
animation: allin-7 .5s linear;
}
.image-8{
animation: allin-8 .5s linear;
}
.image-9{
animation: allin-9 .5s linear;
}
.image-10{
animation: allin-10 .5s linear;
}
@keyframes allin-1{
0% {
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
opacity: 1;
}
10%{
opacity: 0;
}
100% {
opacity: 1;
top: extract(@top, 1);
left: extract(@left,1);
}
}
@keyframes allin-2{
0% {
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
opacity: 1;
}
10%{
opacity: 0;
}
100% {
opacity: 1;
top: extract(@top, 2);
left: extract(@left,2);
}
}
@keyframes allin-3{
0% {
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
opacity: 1;
}
10%{
opacity: 0;
}
100% {
opacity: 1;
top: extract(@top, 3);
left: extract(@left,3);
}
}
@keyframes allin-4{
0% {
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
opacity: 1;
}
10%{
opacity: 0;
}
100% {
opacity: 1;
top: extract(@top, 4);
left: extract(@left,4);
}
}
@keyframes allin-5{
0% {
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
opacity: 1;
}
10%{
opacity: 0;
}
100% {
opacity: 1;
top: extract(@top, 5);
left: extract(@left,5);
}
}
@keyframes allin-6{
0% {
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
opacity: 1;
}
10%{
opacity: 0;
}
100% {
opacity: 1;
top: extract(@top, 6);
left: extract(@left,6);
}
}
@keyframes allin-7{
0% {
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
opacity: 1;
}
10%{
opacity: 0;
}
100% {
opacity: 1;
top: extract(@top, 7);
left: extract(@left,7);
}
}
@keyframes allin-8{
0% {
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
opacity: 1;
}
10%{
opacity: 0;
}
100% {
opacity: 1;
top: extract(@top, 8);
left: extract(@left, 8);
}
}
@keyframes allin-9{
0% {
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
opacity: 1;
}
10%{
opacity: 0;
}
100% {
opacity: 1;
top: extract(@top, 9);
left: extract(@left, 9);
}
}
@keyframes allin-10{
0% {
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
opacity: 1;
}
10%{
opacity: 0;
}
100% {
opacity: 1;
top: extract(@top, 10);
left: extract(@left, 10);
}
}
each(range(10), {
.image-@{index}{
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
opacity: 1;
transition: all .5s;
position: absolute;
left: calc(50% - 114rpx);
top: calc((1127rpx / 2) - 150rpx);
width: 196rpx;
height: 270rpx;
animation-delay: (50ms * @index);
animation-fill-mode: forwards;
}
})
看到最底下的这一段循环, 可能有人就要问了, 你都用了循环了, 为什么之前没想到动画也放到循环里去处理, 我试过, 后来放弃了, (毕竟路子不对, 一直在那较劲为什么image-@{index}输出出来的是image-1 而我animation-name: allin-@{index} 是allin- 1 多了个空格懂伐? 而且也因为工期紧的问题, 唔, 就没去细想, 直到今天上线了才想起来有功夫去想怎么去掉那么多恶心的重复代码
