• vue 文字无缝滚动 停顿在滚动


    <template>
      <div>
        <h1>demo11</h1>
        <h2>文字无缝滚动+停顿滚动 -- CSS动画</h2>
        <div class="text-container">
          <div class="inner-container">
            <p class="text"
               v-for="(text, index) in arr"
               :key="index">{{text}}</p>
          </div>
        </div>
        <h2>文字停顿滚动</h2>
        <div class="text-container">
          <transition class="inner-container2"
                      name="slide"
                      mode="out-in">
            <p class="text2"
               :key="text.id">{{text.val}}</p>
          </transition>
        </div>
      </div>
    </template>
     
    <script>
    const totalDuration = 2000;
    
    export default {
      name: 'demo11',
      props: [],
      data () {
        return {
          arr: [
            '1 不是被郭德纲发现的,也不是一开始就收为徒弟。',
            '2 现在雅阁这个状态像极了新A4L上市那段日子。',
            '3 低配太寒碜,各种需要加装,中配定价过高,又没啥特色',
            '4 然后各种机油门、经销商造反什么的幺蛾子。',
            '5 看五月销量,建议参考A4,打8折吧。',
            '1 不是被郭德纲发现的,也不是一开始就收为徒弟。',
          ],
          number: 0,
        }
      },
      computed: {
        text () {
          return {
            id: this.number,
            val: this.arr[this.number]
          }
        }
      },
      mounted () {
        this.startMove()
      },
      methods: {
        startMove () {
          let timer = setTimeout(() => {
            if (this.number === 5) {
              this.number = 0;
            } else {
              this.number += 1;
            }
            this.startMove();
          }, totalDuration)
        },
      },
      components: {}
    }
    </script>
     
    <style scoped>
    h2 {
      margin: 20px 0;
    }
    .text-container {
      width: 500px;
      height: 30px;
      line-height: 30px;
      margin: 10px auto;
      border: 1px solid cornflowerblue;
      overflow: hidden;
    }
    .text,
    .text2 {
      margin: 0;
    }
    .inner-container {
      animation: myMove 5s linear infinite;
      animation-fill-mode: forwards;
    }
    /*文字无缝滚动*/
    @keyframes myMove {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-150px);
      }
    }
    /*文字停顿滚动*/
    @keyframes myMove2 {
      0% {
        transform: translateY(0);
      }
      10% {
        transform: translateY(-30px);
      }
      20% {
        transform: translateY(-30px);
      }
      30% {
        transform: translateY(-60px);
      }
      40% {
        transform: translateY(-60px);
      }
      50% {
        transform: translateY(-90px);
      }
      60% {
        transform: translateY(-90px);
      }
      70% {
        transform: translateY(-120px);
      }
      80% {
        transform: translateY(-120px);
      }
      90% {
        transform: translateY(-150px);
      }
      100% {
        transform: translateY(-150px);
      }
    }
    .slide-enter-active,
    .slide-leave-active {
      transition: all 0.5s linear;
    }
    .slide-leave-to {
      transform: translateY(-20px);
    }
    .slide-enter {
      transform: translateY(20px);
    }
    </style>

    转载https://www.cnblogs.com/llying/p/9642817.html

  • 相关阅读:
    课堂练习
    日程管理测试用例
    日程管理APP的测试计划和测试矩阵
    日程管理Bug Report
    图书管理系统活动图
    团队如何做决定?
    课堂练习
    课堂练习(NABCD Model)
    课堂练习
    日程管理的测试计划和测试矩阵
  • 原文地址:https://www.cnblogs.com/aknife/p/13438322.html
Copyright © 2020-2023  润新知