下面的是PPT教程网给你带来的相关内容：

ppt图片上下滚动播放效果:Vue中实现文字向上滚动的动画效果

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

1 无缝滚动

无缝滚动如图：

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

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

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

模板：

  
{{text}}

CSS部分：

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

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

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

当动画结束时通过：

animation-fill-mode: forwards;

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

2 停顿滚动

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

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

/*文字停顿滚动*/
@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提供的函数功能帮助你完成，具体就不在这里展开了

第二种思路就是不用列表容器的移动，而是仅保留一个

元素，不断变化其内容，在变化过程中实现移动的效果。

这种思路要借用到Vue提供的组件了，它提供了一些类名ppt图片上下滚动播放效果:Vue中实现文字向上滚动的动画效果，比如v-enter、v-enter-等来对应CSS的类，同时在对应我们这种情况的多个元素的过度时，还需要使用过渡模式out-in，具体可以参考。

代码如下：

模板:

  
    
{{text.val}}
  

多了一个计算属性

computed: {
  text() {
    return {
      id: this.number,
      val: this.arr[this.number]
    }
  }
},

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

startMove() {
  let timer = setTimeout(() = > {
    if (this.number === 5) {
      this.number = 0;
    } else {
      this.number += 1;
    }
    this.startMove();
  }, 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在这里。

使用列表过渡实现

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

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

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

在我当前的需求下ppt图片上下滚动播放效果，如果设置了绝对定位，元素在移除时会重叠显示多个元素

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

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

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

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

参考

感谢你支持pptjcw.com网，我们将努力持续给你带路更多优秀实用教程！

上一篇：ppt英文翻译:ppt翻译插件_PPT全是英文，领导急要翻译？这个神器5分钟帮你解决难题！ 下一篇：ppt英文翻译:PPT翻译成中文怎么弄？免费翻译ppt的软件

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。