实现文字循环横向滚动效果(当显示到最后一个字时从头再次开始)

 nameAnimation : 需要添加动画效果的元素的id; 

页面引入了decimal.js的加减乘除方法

     // 动态设置动画效果
    handleGetStyle(nameAnimation) {
      // 获取到当前需要添加动画的id
     let nameAnimationDom = document.getElementById(nameAnimation);
     // 获取当前名字的宽度
     let myWidth = nameAnimationDom.offsetWidth
     // 获取父元素的宽度
     let myParentWidth = nameAnimationDom.parentNode.offsetWidth
     // 获取实际计算的宽度
     let computedWidth = myWidth<myParentWidth?myParentWidth:myWidth
     // 计算需要移动的百分比
     let myPercent = except(Math.abs(reduce(myWidth - myParentWidth)),computedWidth)*100
     var ss = document.styleSheets;
     // 追加动画属性
     ss[0].insertRule(`@keyframes ${nameAnimation} { 
				0% {
          transform: translateX(5%);
          -webkit-transform: translateX(5%);
        }

        100% {
          transform: translateX(-${myPercent}%);
          -webkit-transform: translateX(-${myPercent}%);
        }
				}`, 0);
        // 给当前元素添加动画样式
      nameAnimationDom.setAttribute('style',`animation: 8s ${nameAnimation} linear infinite normal;`);
    },