scss- 给 item 添加动画效果 

 1     <div class="five">
 2         <div class="item" :class="`item${k}`" v-for="(v, k) in props.data" :key="k" :style="{ background: `var(${v.color5})`, borderLeftColor: `var(${v.color4})`}">
 3             <div class="num3">{{ v.num3 }}</div>
 4             <span class="font22 total-num">{{ assCommas(v.num1) }}</span>
 5         </div>
 6     </div>
 7  
 8 @keyframes error-num {
 9     0% {
10         transform: translateY(60px);
11         opacity: 0;
12     }
13     100% {
14         transform: translateY(0);
15         opacity: 1;
16     }
17 }
18     @for $i from 0 through 4 {
19         .item#{$i} {
20             opacity: 0;
21             animation-name: error-num;
22             animation-duration: 0.5s;
23             animation-fill-mode: forwards;
24             animation-delay: calc($i/4) + s;
25         }
26     }

 

posted @ 2023-03-29 17:34  zzzzzyyyyyy  阅读(101)  评论(0)    收藏  举报