vue 动画效果

<template>

    <div class="notice-box" @mousemove="mousemove"  @mouseleave="mouseleave" style="height:50px;background:#ccc;color:#fff;position: relative;">

        <div class="notice" :style="{'animation-duration':len, 'animation-play-state': play}"><div style="    display: inline-block;margin-right:20px;" v-for="item in list" :key="item.id">{{item.name}}</div></div>

    </div>

</template>

<script>

    import { defineComponent, ref } from '@vue/composition-api'

    import { Input} from 'element-ui'

    export default defineComponent({

        components: { Input },

        setup() {

            const list = ref([

                { name: '下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次' },

             { name: '下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次' },

             { name: '下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次' },

             { name: '下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次下次' },

             ])

            const len = ref(0)

            const len2 = ref(0)

            const play = ref('running')

            return { list, len, len2, play }

        },

        mounted() {

            this.notice();

        },

        methods: {

            mouseleave() {

                this.play = 'running'

            },

            mousemove() {

                this.play = 'paused'

            },

            notice() {

                const noticeBox = document.getElementsByClassName('notice-box')[0];

                const notice = document.getElementsByClassName('notice')[0];

                if (notice.clientWidth < noticeBox.clientWidth) {

                    this.len = (noticeBox.clientWidth + notice.clientWidth) / 80 + 's'

                } else {

                    this.len = notice.clientWidth / 80 + 's'

                }

                let style = document.createElement('style');

                style.setAttribute('type', 'text/css');

                document.head.appendChild(style);

                let sheet = style.sheet;

                sheet.insertRule(`

                    @keyframes notice {

                        0% {

                            transform: translateX(${noticeBox.clientWidth}px);

                        }

                        100% {

                            transform: translateX(-${notice.clientWidth}px);

                        }

                    }

                `)

            }

        }

    })

</script>

<style scoped>

    

    .notice{

        position: absolute;

        white-space: nowrap;display: inline-block;

        animation:notice infinite;animation-timing-function:linear;

    }

</style>