[JavaScript知识库]vue中滚动文字公告（2）-transition-slide

思路：

利用js代码控制显示内容，用<transition>改变过渡样式

优势：效果可调

劣势：代码较多

代码：

<template>
  <div>
    <div class="noticeBox">
      <transition name="slide">
        <div class="notice" :key="text.id">
          <div class="notice_item">
            <img :src="text.val.icon" alt="" class="notice_img">
            <span class="notice_content">{{text.val.content}}</span>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ScrollNotice",
    data () {
      return {
        noticeLists: [
          {icon:require('@/assets/images/notice.png'),content:'1 此处为公告11111111'},
          {icon:require('@/assets/images/notice.png'),content:'2 此处为公告22222222'},
          {icon:require('@/assets/images/notice.png'),content:'3 此处为公告33333333'},
          {icon:require('@/assets/images/notice.png'),content:'4 此处为公告44444444'},
          {icon:require('@/assets/images/notice.png'),content:'5 此处为公告55555555'},
        ],
        index: 0,
        timer: null,
        first: true,
        period: '3000'
      }
    },
    computed: {
      text () {
        return {
          id: this.index,
          val: this.noticeLists[this.index]
        }
      }
    },
    mounted () {
      this.Move()
    },
    beforeDestroy(){
      this.timer = null
    },
    methods: {
      Move () {
        this.first? this.period = 0 : this.period = '3000' // 用于无停顿滚动，后面时间与style中样式过渡时间一致
        this.timer = setTimeout(() => {
          this.first = false
          this.index += 1
          if (this.index>=this.noticeLists.length) {
            this.index = 0
          }
          this.Move()
        }, this.period);
      }
    }
  }
</script>

<style scoped>
  .noticeBox {
    width: 1200px;
    height: 40px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
  }
  .notice {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    line-height: 40px;
  }
  .notice_item{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .notice_content{
    line-height: 40px;
    height: 40px;
  }
  .notice_img{
  }
  .slide-enter-active, .slide-leave-active {
    transition: all 3s linear;
  }
  .slide-enter{
    transform: translateX(800px);
    opacity: 0;
  }
  .slide-leave-to {
    transform: translateX(-800px);
    opacity: 0;
  }
</style>