Loading

Vue一行代码设置递增过渡动画



原始的CSS方式

.weather_list li:nth-child(1) {
        transition-delay: 0s;
      }
      .weather_list li:nth-child(2) {
        transition-delay: 100ms;
      }
      .weather_list li:nth-child(3) {
        transition-delay: 200ms;
      }
      .weather_list li:nth-child(4) {
        transition-delay: 300ms;
      }
      .weather_list li:nth-child(5) {
        transition-delay: 400ms;
      } 

通过bind指令和transition-delay的属性

 :style="{'transition-delay': index*100+'ms' }"
posted @ 2021-06-02 09:57  Mzs-Qsy  阅读(23)  评论(0编辑  收藏  举报