Vue中实现文字向上滚动的动画效果

时间:2024-10-21 09:46:33

在Vue中,想要实现文字向上滚动的效果,分成两种情况:

1 无缝滚动

无缝滚动如图:

文字无缝滚动

我说的无缝滚动主要是指两点:

  1. 滚动中没有停顿
  2. 从头至尾再循环播放时没有停顿

实现这种情况可以使用CSS3的动画实现,主要原理就是让多个文字的容器进行移动:

模板:

<div class="inner-container">
  <p class="text" v-for="(text, index) in arr" :key="index">{{text}}</p>
</div>

CSS部分:

.inner-container {
  animation: myMove 5s linear infinite;
  animation-fill-mode: forwards;
}
  /*文字无缝滚动*/
@keyframes myMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-150px);
  }
}

滚动中没有停顿是通过keyframes实现的,而循环在播放时没有“跳帧”的效果,只要是通过增加一条多余数据:

data() {
  return {
    arr: [
    '1 不是被郭德纲发现的,也不是一开始就收为徒弟。',
    '2 现在雅阁这个状态像极了新A4L上市那段日子。',
    '3 低配太寒碜,各种需要加装,中配定价过高,又没啥特色',
    '4 然后各种机油门、经销商*什么的幺蛾子。',
    '5 看五月销量,建议参考A4,打8折吧。', 
    '1 不是被郭德纲发现的,也不是一开始就收为徒弟。', 
    ],
  }
},

当动画结束时通过:

animation-fill-mode: forwards;

将动画重置为第一帧,这样就能够实现无缝的播放了

2 停顿滚动

实现停顿真的是在第一行文字滚动出现后,停顿一下,在进行滚动移出:

文字停滚动

实现这种效果有两个思路,第一个思路是沿用上面的方法,用包裹容器的移动来实现,只不过在keyframes总要精细化,留出停顿的时间:

/*文字停顿滚动*/
@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);
  }
}

不过看起来好麻烦,而且如果文字行数过多的话,岂不是吐血,这时候可以使用LESS或者SASS提供的函数功能帮助你完成keyframes,具体就不在这里展开了

第二种思路就是不用列表容器的移动,而是仅保留一个<p>元素,不断变化其内容,在变化过程中实现移动的效果。

这种思路要借用到Vue提供的transition组件了,它提供了一些类名,比如v-enterv-enter-active等来对应CSS的类,同时在对应我们这种情况的多个元素的过度时,还需要使用过渡模式out-in,具体可以参考官方文档

代码如下:

模板:

<div class="text-container">
  <transition class="inner-container2" name="slide" mode="out-in">
    <p class="text2" :key="">{{}}</p>
  </transition>
</div>

多了一个计算属性

computed: {
  text() {
    return {
      id: ,
      val: []
    }
  }
},

再建立一个定时器,在定时器中不断改变计算属性对应的值:

startMove() {
  let timer = setTimeout(() = > {
    if ( === 5) {
       = 0;
    } else {
       += 1;
    }
    ();
  }, totalDuration)
},

同时在CSS部分添加对应的类:

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

这样就OK了,demo在这里

使用列表过渡实现

博客下面,有人评论,可以使用列表过渡加定时器实现,所以就试了一下,思路是利用定时器,不断改变列表元素的位置,将最后一个元素查到列表的开始。可以实现,但是效果不如上面的完美。

<template>
  <div>
    <h2>列表过渡</h2>
    <div class="text-container">
      <transition-group tg="div" name="list" class="list-container" mode="out-in">
        <p v-for="(text, index) in arr2" :key="text + index" class="list-item">{{text}}</p>
      </transition-group>
    </div>
  </div>
</template>

<script>
  const totalDuration = 2000;
  export default {
    name: 'demo11',
    data() {
      return {
        arr: ['1 不是被郭德纲发现的,也不是一开始就收为徒弟。', '2 现在雅阁这个状态像极了新A4L上市那段日子。', '3 低配太寒碜,各种需要加装,中配定价过高,又没啥特色', '4 然后各种机油门、经销商*什么的幺蛾子。', '5 看五月销量,建议参考A4,打8折吧。', '1 不是被郭德纲发现的,也不是一开始就收为徒弟。', ],
        number2: -1,
      }
    },
    mounted() {
      this.startMove2()
    },
    methods: {
      startMove2() {
        let timer = setTimeout(() = > {
          this.number2 += 1;
          if (this.number2 > 4) {
            const target = this.(4, 1);
            this.(target[0])
          } else {
            this.([this.number2]);
          }
          this.startMove2();
        }, totalDuration)
      },
    },
  }
</script>

<style scoped>
.list-container {
  position: relative;
  overflow: hidden;
}

.list-item {
  margin: 0;
  transition: all 1s;
  overflow: hidden;
}


.list-enter {
  transform: translateY(30px);
}

.list-enter-to, .list-leave {
  transform: translateY(0);
}

.list-leave-to {
  transform: translateY(-30px)
}

.list-leave-active {
  position: absolute;
  width: 0;
}
</style>

因为列表过渡,新的元素插入时可以平滑度过,但是元素移除时如果要实现平滑过渡需要在v-leave-active的样式中将定位设定为绝对定位

.list-leave-active {
  position: absolute;
}

在我当前的需求下,如果设置了绝对定位,元素在移除时会重叠显示多个元素

所以在这个阶段加了一个属性,让宽度为0,不显示过渡期间重叠的元素:

.list-leave-active {
  position: absolute;
  width: 0;
}

这样重叠的问题解决了,但是元素在移除时的效果就很生硬:

可能是我的设置不太对,也许直接将没有过渡期间的列表项的定位就设为绝对定位,通过钩子改变时直接改变绝对定位的top值也许能解决这个问题,如果有人尝试成功还望赐教。

参考

  • 纯css3实现文字间歇滚动效果@小目标
  • 纯css实现的无缝滚动@知乎
  • 列表过渡@Vue