1. Html structure in 30 seconds

<template> <div> <div class="notice-box" @mouseenter="mouseEnter" @mouseleave="mouseLeave"> <transition name="notice-slide"> <p class="notice-item" :key="noticeList.id"> {{ noticeList.text }} </p> </transition> </div> </div>  </template>Copy the code

2. Take another 60 seconds to complete the style

<style scoped> .notice-box { width: 500px; height: 30px; margin: 0 auto; overflow: hidden; position: relative; text-align: center; border: 1px solid red; } .notice-item { width: 100%; height: 30px; line-height: 30px; box-sizing: border-box; position: absolute; top: 0; }. Notice-slide-enter-active,. Notice-slide-leave-active {transition: all 0.8s linear; } .notice-slide-enter { top: 30px; } .notice-slide-leave-to { top: -30px; } </style>Copy the code

3. Spend 1 minute and 30 seconds on the js logic

<script> export default {name: 'scroll', data() {return {noticeArr: [{title: '1st bulletin 111111111111111111'}, {title: 'Notice no. 222222222222222'}, {title:' Notice No. 3 333333333333333333 '}, {title: 'Notice No. 4 444444444444444444444444'}, {title: 'Notice 555555555555555'},], number: 0,}; }, computed: { noticeList() { return { id: this.number, text: this.noticeArr[this.number].title, }; timer:nuul }, }, mounted() { this.scollMove(); }, methods: {// Scroll function scollMove() {this.timer = setTimeout(() => {if (this.number === this.noticear.length-1) {this.number = 0;  } else { this.number += 1; } this.scollMove(); }, 3000); }, // enter mouseEnter() {clearInterval(this.timer); }, // mouse away from mouseLeave() {this.scollmove (); }}}; </script>Copy the code

4, the final conclusion

This effect is mainly implemented using the Transition component of VUE. For more information on how to use the Transition component of VUE flexibly, see the documentation of VUE. If you find this article useful, give it a thumbs up! Thank you very much!