当前位置:   article > 正文

在vue中,文字向上滚动效果。_vue文字动画

vue文字动画

HTML:

<div class="nwwest-roll" id="nwwest-roll">
                <ul id="roll-ul">
                    <li v-for="item in list" ref="rollul" :class="{anim:animate==true}">
                        <span class="name">{{item.name}}</span>
                        <span class="site">{{item.site}}</span>
                        <span class="gsmc">{{item.gsmc}}</span>

                    </li>

</div>

CSS:

.newest-bill .nwwest-roll {
    padding-left: 15px;
    height: 210px;
    margin: 10px auto;
    overflow: hidden;
     transition: all 0.5s;
}
.newest-bill .nwwest-roll li{
  height: 35px;
  line-height: 35px;

}

.anim{
  transition: all 0.5s;

}


data:

data() {
    return {
        animate:true,
        list:[
            {"name":"于先生1","site":"北京门头沟区1","gsmc":"柠檬树装饰1"},
            {"name":"于先生2","site":"北京门头沟区2","gsmc":"柠檬树装饰2"},
            {"name":"于先生3","site":"北京门头沟区3","gsmc":"柠檬树装饰3"},
            {"name":"于先生4","site":"北京门头沟区4","gsmc":"柠檬树装饰4"},
            {"name":"于先生5","site":"北京门头沟区5","gsmc":"柠檬树装饰5"},
            {"name":"于先生6","site":"北京门头沟区6","gsmc":"柠檬树装饰6"},
            {"name":"于先生7","site":"北京门头沟区7","gsmc":"柠檬树装饰7"},
            {"name":"于先生8","site":"北京门头沟区8","gsmc":"柠檬树装饰8"},
            {"name":"于先生9","site":"北京门头沟区9","gsmc":"柠檬树装饰9"},
            {"name":"于先生10","site":"北京门头沟区10","gsmc":"柠檬树装饰10"},
            {"name":"于先生11","site":"北京门头沟区11","gsmc":"柠檬树装饰11"}
        ]
    };

  }

js:

created(){
       setInterval(this.scroll,2000) 
},
  methods: {
       scroll(){
        let con1 = this.$refs.rollul;
        con1[0].style.marginTop='30px';
        this.animate=!this.animate;
        var that = this; // 在异步函数中会出现this的偏移问题,此处一定要先保存好this的指向
        setTimeout(function(){
            that.list.push(that.list[0]);
            that.list.shift();
            con1[0].style.marginTop='0px';
            that.animate=!that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象,此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        },0)
  }
}

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/700452
推荐阅读
相关标签
  

闽ICP备14008679号