css3 implementa la función de lista de reproducción de desplazamiento dinámico

 .mensajes
        carrusel de nombres de animaciones
        función de temporización de animación lineal
        animación-iteración-recuento infinito
        .elemento-mensaje
            puntero del cursor
            margen superior 10px
        &.stopPlay
            animación-reproducción-estado en pausa
            /**
              La propiedad CSS3 Animation-Play-State pausa la animación cuando está en pausa y continúa la animación cuando se está ejecutando*/
    carrusel de @keyframes {
        0% {
            transformar: traducirY(0%)
        }
        100% {
            transformar: traducirY(-50%)
        }
    }

 <plantilla>
    <div>
        <div class="línea superior">
            <div class="box-title">
                <span class="title">Mapa temático XXXX</span>
            </div>
        </div>
        <div class="cuadro de desplazamiento">
            <ul class="mensajes" @mouseover="stopAnim" @mouseout="runAnim" v-if="list.length"
                :style="{ animaciónDuración: animaciónDuración }" :class="{ stopPlay: animaciónPlayState }">
                <li class="message-item" v-for="(elemento, índice) en la lista" :key="index" @click="toDetail(item)">
                    <div class="mensaje-top">
                        <span class="message-title">{{ item.name }}</span>
                        <span class="message-time">{{ item.startDate }}</span>
                    </div>
                    <p class="message-content">{{ elemento.content }}</p>
                </li>
            </ul>
            <div class="none" v-else>
                Aún no hay contenido</div>
        </div>
    </div>
</plantilla>

 <guión>
importar test11List desde '@/assets/test11List'
exportar por defecto {
    datos() {
        devolver {
            animaciónDuración: '',
            animaciónPlayState: falso,
            lista: test11List.list,
            categoría: ''
        };
    },
    montado() {
        this.getData()
    },
    métodos: {
        obtenerDatos() {
            dejar datos = this.list
            si (datos.longitud <= 2) {
                this.animationPlayState = verdadero
                this.animationDuration = 2 + 's'//Duración de la animación} else {
                // Animación de marquesina this.animationDuration = data.length * 2 + 's'
                esta.lista = esta.lista.concat(esta.lista)
            }
        },
        stopAnim() {//El mouse se mueve hacia la animación de pausa this.animationPlayState = true
        },
        runAnim() {//La eliminación del mouse continúa la animación si (this.list.length > 2) {
                this.animationPlayState = falso
            }
        }
    },
};
</script>

 <estilo lang="lápiz" con alcance>
    *{
        margen: 0
        relleno: 0
    }
    ul{
        estilo de lista: ninguno
    }
    .cuadro de desplazamiento {
        ancho 100%
        altura 800px
        desbordamiento oculto
        borde 2px rojo sólido
    }
    .título del cuadro
        altura de línea 34px
        tamaño de fuente 16px
        fondo: azul
        color: #fff
        opacidad 1
    .mensajes
        carrusel de nombres de animaciones
        función de temporización de animación lineal
        animación-iteración-recuento infinito
        .elemento-mensaje
            puntero del cursor
            margen superior 10px
        &.stopPlay
            animación-reproducción-estado en pausa
            /**
              La propiedad CSS3 Animation-Play-State pausa la animación cuando está en pausa y continúa la animación cuando se está ejecutando*/
    .ninguno
        centro de alineación de texto
        altura de línea 537px
        color #fff
    carrusel de @keyframes {
        0% {
            transformar: traducirY(0%)
        }
        100% {
            transformar: traducirY(-50%)
        }
    }
</estilo>