vue橫向平滑滾動消息通知

場景：橫向平滑滾動展示消息；消息列表是接口獲取；類似於游戲中的廣播消息

方法一、純css animation

在css中定義關鍵幀，並寫入animation樣式

// animation: line 20s linear infinite;


// @keyframes line{
//   0%{
//     transform: translateX(0);
//   }
//   100%{
//     transform: translateX(-100%);
//   }
// }

產生問題：只能寫死動畫時間，若接口返回數據比較大，滾動動畫就會很快，效果不理想；

方法二、js+css animation

js獲取接口返回數據生成的dom元素寬度，根據寬度來定義時間與速度

const width = this.$refs.subBox.offsetWidth
        const time = Math.ceil(width/80) 
        this.$refs.subBox.style.animation = `line ${time}s linear infinite`;

css關鍵幀動畫名定義不變：

// @keyframes line{
//   0%{
//     transform: translateX(0);
//   }
//   100%{
//     transform: translateX(-100%);
//   }
// }

產生問題：vue項目由於scoped，打包文件對應的樣式格式  data-v-xxxxx，無法與js定義的動畫animationName 關鍵幀對應上；

換個思路，結合方法一，如果先在css中定義動畫名稱animationName，通過js獲取接口返回數據生成的dom元素寬度，再通過js修改動畫時間animationDuration同樣無法生效；

解決辦法：全局定義關鍵幀

全局css文件中定義關鍵幀動畫名，js獲取接口返回數據生成DOM元素寬度，然后js添加動畫樣式，定義動畫時長，達到效果；

方法三、當前頁面js定義關鍵幀，插入css styleSheets，再定義animation

const width = this.$refs.subBox.offsetWidth
        const time = Math.ceil(width/80) 
        const keyframesLine = `
          @keyframes line{
              0%{
                transform: translateX(0);
              }
              ${120/time}%{
                  transform: translateX(0);
              }
              100%{
                transform: translateX(-100%);
              }
          }
        `
        var style =document.styleSheets[0]
        style.insertRule(keyframesLine,style.length-1)
        this.$refs.subBox.style.animation = `line ${time}s linear infinite`;

達到效果，根據接口實際數據，定義動畫時長

補充說明

設置動畫延遲，只會在第一次生效，若要每次循環都有延時，改變思路，在每一次動畫過程中，開始一段進度不發生變化即可

@keyframes line{
              0%{
                transform: translateX(0);
              }
              ${120/time}%{
                  transform: translateX(0);
              }
              100%{
                transform: translateX(-100%);
              }
          }

當中，在某一進度無變化

${120/time}%{
                  transform: translateX(0);
              }