vue背景渐变切换动画

短命女 2022-05-21 01:55 341阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            body, p, img, dl, dt, dd, ul, ol, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
            body { position: relative; font: 12px/1.5 Simsun, Arial; }
            ul, ol { list-style: none; }
            img { border: 0 none; }
            input, select { vertical-align: middle; }
            table { border-collapse: collapse; }
            s, em, i { font-style: normal; text-decoration: none; }
            a { outline: none; text-decoration: none; }
            a:hover { text-decoration: underline; }
            .clear { *zoom: 1; }
            .clear:after { clear: both; content: "."; display: block; height: 0; overflow: hidden; visibility: hidden; zoom: 1; }
            .flip-list-enter-active, .flip-list-leave-active {
                transition: all 1s;
            }
            .flip-list-enter, .flip-list-leave-active {
                opacity: 0;
            }
            #app li {
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
    
    <div id="app" class="demo">
        <transition-group name="flip-list" tag="ul">
            <li v-for="curImg in currImgs" v-bind:key="curImg" class="list-item">
                <img :src="curImg">
            </li>
        </transition-group>
    </div>
    
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                currImgs: [],
                imgs: [
                    'https://img11.360buyimg.com/da/jfs/t4000/107/2234194410/85271/6c24d985/58a50cafNb60886c9.jpg',
                    'https://img20.360buyimg.com/da/jfs/t3154/175/5917485830/129679/f123634c/5897e6a2N83837dd2.jpg',
                    'https://img1.360buyimg.com/da/jfs/t3133/89/5984232745/66970/beaf615c/589ac9bcNe544a72e.jpg',
                    'https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg'
                ],
                index: 0
            },
            mounted: function () {
                this.currImgs = [this.imgs[0]];
                this.startChange();
            },
            methods: {
                startChange: function () {
                    var _this = this;
                    setInterval(function () {
                        if (_this.index < _this.imgs.length - 1) {
                            _this.index++
                        } else {
                            _this.index = 0
                        }
                        _this.currImgs.splice(0, 1, _this.imgs[_this.index]);
                    }, 2000);
                }
            }
        })
    </script>
    </body>
    </html>