vue中顶部提示信息跳动显示

transition: top 0.5s;实现跳动的关键，

word-break:break-all;实现字体换行

""转译，否则掘金不让发

若是各位大佬发现哪里有问题了，请提出方便小菜作改正。

效果：

<\template>

<div class="wrap">
  <ul 
  class="scrollDiv" 
  style="position: absolute;transition: top 0.5s;">
    <li>1123123132131313213132131</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6123123132nihao</li>
  </ul>
</div>
复制代码

<\/template>

<\script>

export default {

name: 'App',

mounted () {

this.srcollWrap()
复制代码

},

methods: {

srcollWrap(){
    // 获取滚动内容的高度
  let scrollDivHeight = document.getElementsByClassName("scrollDiv")[0].offsetHeight
    //能够理解为滚动速度
  let scrollPx=0;
    // 滚动次数
  let num = scrollDivHeight/60
    setInterval(function(){
      scrollPx++
      if(scrollPx < num){
        // 一次滚动的距离为60*scrollPx
        document.getElementsByClassName("scrollDiv")[0].style.top=-60*scrollPx+'px'
      }else{
        document.getElementsByClassName("scrollDiv")[0].style.top=0
        scrollPx=0
      }          
    },1000)
}
复制代码

} }

</script>

<\style>

#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

ul,li{ list-style: none; }

img{ display: block; border: 0; }

a{ text-decoration: none; }

.wrap{ width: 300px; height: 60px; overflow: hidden; position: relative; }

.wrap .scrollDiv li{ width: 60px; line-height: 60px; font-size: 36px; text-align: center; word-break:break-all; }

</style>