vue动画相关（CSS2）

1.vue实现公告栏文字上下滚动效果

自己项目

<div class="Title">
      <transition class="inner-container2" name="slide" mode="out-in">
        <div style="display: flex;" :key="text.id">
          <div :key="text.id">
            {{text.val.name}}赠送您{{text.val.score}}积分
          </div>
          <div>
            <button>去确认</button>
          </div>

        </div>
      </transition>
      <div>{{TitleList[number]}}</div>
    </div>

return{
        TitleList:[{name:'张大飞',score:'1000.00'},{name:'张二飞',score:'2000.00'},{name:'张三飞',score:'3000.00'}],
      }
    computed: {
      text() {
        return {
          id: this.number,
          val: this.TitleList[this.number]
        }
      }
    },  

mounted(){
      this.startMove();
    },

startMove () {
        // eslint-disable-next-line
        let timer = setTimeout(() => {
          if (this.number === this.TitleList.length-1) {
            this.number = 0;
          } else {
            this.number += 1;
          }
          this.startMove();
        }, 5000); // 滚动不需要停顿则将2000改成动画持续时间
      },

.slide-enter-active, .slide-leave-active {
      transition: all 0.5s linear;
    }
    .slide-leave-to {
      transform: translateY(-20px);
    }
    .slide-enter {
      transform: translateY(20px);
    }

<template>
  <div>
    <h2>公告栏文字停顿滚动</h2>
    <div class="textBox">
      <transition name="slide">
        <p class="text" :key="text.id">{{text.val}}</p>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'scroll',
  data () {
    return {
      textArr: [
        '1 第一条公告',
        '2 第二条公告第二条公告',
        '3 第三条公告第三条公告第三条公告'
      ],
      number: 0
    }
  },
  computed: {
    text () {
      return {
        id: this.number,
        val: this.textArr[this.number]
      }
    }
  },
  mounted () {
    this.startMove()
  },
  methods: {
    startMove () {
      // eslint-disable-next-line
      let timer = setTimeout(() => {
        if (this.number === 2) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
    }
  }
}
</script>

<style scoped>
  h2 {
    padding: 20px 0
  }
  .textBox {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
  }
  .text {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  .slide-enter-active, .slide-leave-active {
    transition: all 0.5s linear;
  }
  .slide-enter{
    transform: translateY(20px) scale(1);
    opacity: 1;
  }
  .slide-leave-to {
    transform: translateY(-20px) scale(0.8);
    opacity: 0;
  }
</style>