1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

.messages

    animation-name carousel

    animation-timing-function linear

    animation-iteration-count infinite

    .message-item

        cursor pointer

        margin-top 10px

    &.stopPlay

        animation-play-state paused

        /**

          CSS3 animation-play-state 属性 值为paused时暂停动画，为running时继续动画

         */

@keyframes carousel {

    0% {

        transform: translateY(0%)

    }

    100% {

        transform: translateY(-50%)

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<template>

    <div>

        <div class="top-line">

            <div class="box-title">

                <span class="title">XXXX专题图</span>

            </div>

        </div>

        <div class="scroll-box">

            <ul class="messages" @mouseover="stopAnim" @mouseout="runAnim" v-if="list.length"

                :style="{ animationDuration: animationDuration }" :class="{ stopPlay: animationPlayState }">

                <li class="message-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">

                    <div class="message-top">

                        <span class="message-title">{{ item.name }}</span>

                        <span class="message-time">{{ item.startDate }}</span>

                    </div>

                    <p class="message-content">{{ item.content }}</p>

                </li>

            </ul>

            <div class="none" v-else>

                暂无内容

            </div>

        </div>

    </div>

</template>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<script>

import test11List from '@/assets/test11List'

export default {

    data() {

        return {

            animationDuration: '',

            animationPlayState: false,

            list: test11List.list,

            category: ''

        };

    },

    mounted() {

        this.getData()

    },

    methods: {

        getData() {

            let data = this.list

            if (data.length <= 2) {

                this.animationPlayState = true

                this.animationDuration = 2 + 's'//动画持续时间

            } else {

                // 跑马灯动画

                this.animationDuration = data.length * 2 + 's'

                this.list = this.list.concat(this.list)

            }

        },

        stopAnim() {//鼠标移入暂停动画

            this.animationPlayState = true

        },

        runAnim() {//鼠标移除继续动画

            if (this.list.length > 2) {

                this.animationPlayState = false

            }

        }

    },

};

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<style lang="stylus" scoped>

    *{

        margin: 0

        padding: 0

    }

    ul{

        list-style: none

    }

    .scroll-box{

        width 100%

        height 800px

        overflow hidden

        border 2px solid red

    }

    .box-title

        line-height 34px

        font-size 16px

        background: blue

        color: #fff

        opacity 1

    .messages

        animation-name carousel

        animation-timing-function linear

        animation-iteration-count infinite

        .message-item

            cursor pointer

            margin-top 10px

        &.stopPlay

            animation-play-state paused

            /**

              CSS3 animation-play-state 属性 值为paused时暂停动画，为running时继续动画

             */

    .none

        text-align center

        line-height 537px

        color #fff

    @keyframes carousel {

        0% {

            transform: translateY(0%)

        }

        100% {

            transform: translateY(-50%)

        }

    }

</style>