技術標籤：小技巧

需求:
因一行內的文字太多,需要滾動以展示所有的文字;

法一
利用css3中的動畫進行展示;
定義動畫:

.animate {
  		color: #000;
     	white-space: nowrap;
        animation: 10s wordsLoop linear infinite normal;
 }
@keyframes wordsLoop {
   0% {
                  transform: translateX(20%);
                  -webkit-transform: translateX(
 
20%);
                }
                100% {
                  transform: translateX(-80%);
                  -webkit-transform: translateX(-80%);
                }
                  0% {
                      transform: translateX(200px);
                      -webkit-transform: translateX(200px);
                  }
 

      
                  100% {
                      transform: translateX(-100%);
                      -webkit-transform: translateX(-100%);
                  }
}

但是因為react專案是使用的less語法,會進行預編譯,所以 以上寫法會報錯;

原因是 預解析之後 動畫中呼叫的動畫名被編譯
導致動畫不生效

所以需要我們換一種寫法:

//定義函式
.keyframesFunction (@name,@content) {
  @keyframes @name {
 

    @content();
  }
}


//對應的類名下加入
  .text {
              position: absolute;
              .keyframesFunction (layout,{
                0% {
                  transform: translateX(20%);
                  -webkit-transform: translateX(20%);
                }
                100% {
                  transform: translateX(-80%);
                  -webkit-transform: translateX(-80%);
                }
                  // 0% {
                  //     transform: translateX(200px);
                  //     -webkit-transform: translateX(200px);
                  // }
      
                  // 100% {
                  //     transform: translateX(-100%);
                  //     -webkit-transform: translateX(-100%);
                  // }
              });;
              animation: layout 20s linear infinite normal;
            }

編譯後的效果:

.text{
       position: absolute;
       animation: 10s wordsLoop linear infinite normal;
 }
@keyframes wordsLoop {
   0% {
                  transform: translateX(20%);
                  -webkit-transform: translateX(20%);
                }
                100% {
                  transform: translateX(-80%);
                  -webkit-transform: translateX(-80%);
                }
}	

和直接寫在css中是一樣的;
需求實現:

未完結~~~
法二:js實現