The parent component
<template> <div id="animateList"> <div id="box"> <div id="con1" ref="con1" :class="{anim:animate==true}" @mouseenter="mEnter" @mouseleave="mLeave"> <p v-for='item in List'> <span><span style="color: . # dd7679 "> {{item name}} < / span > < span style =" color: # 00 d1b2 "> {{item. Time}} < / span > login < / span > < / p > < / div > < / div > < / div > < / template > < script > export default {name: "animateList", props:{ List: { type: Array, default: [] }, }, data() { return { animate: false, } }, mounted() { this.timer= setInterval(this.scroll,1000) }, methods: { scroll() { let that = this; that.$refs.con1.style.marginTop = '-30px'; that.animate = ! that.animate; setTimeout(function () { that.List.push(that.List[0]); that.List.shift(); that.$refs.con1.style.marginTop = '0px'; that.animate = ! that.animate; // If you do not animate, the message will be rolled back. }, 500)}, mEnter() {clearInterval(this.timer)}, mLeave() { this.timer = setInterval(this.scroll, 3000) }, }, beforeDestroy() { if (this.timer) {clearInterval(this.timer); } }, } </script> <style scoped> #box{ height: 300px; line-height: 30px; overflow: hidden; The transition: all 0.5 s; color: #ffffff; }. Anim {transition: all 0.5s; } #con1 li{ list-style: none; line-height: 30px; height: 30px; } </style>Copy the codeChild component reference
<template> <div id="index"> <animateList :List="List"></animateList> </div> </template> <script> import animateList from '@ / components/AnimateList AnimateList / / introduction of the parent component path export default {data () {return {List: {name: '1' user, time: '2021/01/12}, {name: users' 2', time: '2021/01/13}, {name: users' 3', time: '2021/01/22'}, {name: '4' user, time: '2021/01/23}, {name: users' 5', time: '2021/02/12}, {name: 6', 'user time:' 2021/02/16 '}, {name: users' 7 ', time: '2021/02/22}, {name: users' 8', time: '2021/02/23}, {name: users' 9', time: '2021/03/03'}, {name:' user10 ',time:'2021/03/12'}]}; }, components:{ animateList } } </script> <style scoped> #index{ background-color: #2f71c7; } </style>Copy the coderendering
The original link
The original link