轮播动画

系统管理员 2022-03-07 06:24 275阅读 0赞

要特别注意的是margin-top在变化的时候，文字会抖动，请给使用动画的元素加上-webkit-backface-visibility: hidden;

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
                * {
                    margin: 0;
                    padding:0;
                }
                html, body{height:100%;}
        
                
        
                .award {
                    width: 100%;
                    height: 1.24rem;
                    margin-top: 0.15rem;
                }
        
                .award_wrap {
                    width: 100%;
                    height: 1.24rem;
                    overflow: hidden;
                    border:0.01rem solid transparent;
                    margin-top:60px;
                    -webkit-backface-visibility: hidden;
                    border:0.01rem solid #000;
                }
        
                .award_box {
                    height: 0.26rem;
                }
        
                .award_item {
                    height: 0.57rem;
                    margin: 0.05rem 0;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    -webkit-backface-visibility: hidden;
                }
        
                .swiper_img {
                    width: 0.52rem;
                    height: 0.52rem;
                    border-radius: 50%;
                    z-index: 100;
                    -webkit-backface-visibility: hidden;
                }
        
                .state {
                    height: 0.56rem;
                    line-height: 0.56rem;
                    max-width: 6rem;
                    font-size: 0.26rem;
                    color: #fddad8;
                    padding: 0 0.16rem 0 0.68rem;
                    margin-left: -0.52rem;
                    background: #CF3732;
                    border-radius: 0.52rem;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    -webkit-backface-visibility: hidden;
                }
            </style>
    </head>
    <body>
        <div class="award_wrap">
            <ul style="-webkit-backface-visibility: hidden;">
                <li class="award_item">
                    <img class="swiper_img" alt="">
                    <p class="state">摇到了  打开讲噶离开讲噶看</p>
                </li>
                <li class="award_item">
                    <img class="swiper_img" alt="">
                    <p class="state">摇到了  小椅子</p>
                </li>
                <li class="award_item">
                    <img class="swiper_img" alt="">
                    <p class="state">摇到了  大苹果</p>
                </li>
                <li class="award_item">
                    <img class="swiper_img" alt="">
                    <p class="state">摇到了  红包报噶九零</p>
                </li>
                <li class="award_item">
                    <img class="swiper_img" alt="">
                    <p class="state">摇到了  6898079法律讲噶看</p>
                </li>
                <li class="award_item">
                    <img class="swiper_img" alt="">
                    <p class="state">摇到了  微软瓦房店市</p>
                </li>
                <li class="award_item">
                    <img class="swiper_img" alt="">
                    <p class="state">摇到了  垃圾垃圾</p>
                </li>
                <li class="award_item">
                    <img class="swiper_img" alt="">
                    <p class="state">摇到了  欧提耶呕i也哦</p>
                </li>
                <li class="award_item">
                    <img class="swiper_img" alt="">
                    <p class="state">摇到了  留影；啊讲按军法</p>
                </li>
                <li class="award_item">
                    <img class="swiper_img" alt="">
                    <p class="state">摇到了  vm,n,mxnb,mxbn</p>
                </li>
            </ul>
        </div>
        <script src="./jquery-3.3.1.min.js"></script>
        <script>
                $(document).ready(function () {
                    setResize();
                    //记得要清除定时器
                    setInterval(function () {  // 添加定时器，每1.5s进行转换
                        console.log(111)
                        $(".award_wrap").find("ul:first").animate({
                            marginTop: "-1.20rem",  //每次移动的距离
                        },2500,'linear', function () {   // 动画运动的时间
                            //$(this)指的是ul对象，
                            //ul复位之后把第一个元素和第二个元素插入
                            //到ul的最后一个元素的位置
                            $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
                            $(this).find("li:first").appendTo(this);
                        });
                    }, 2500)
                });
                setResize = function () {
                    (function () {
                        var resize = function () {
                            var psdW = 750//psd设计图宽度
                            var W = $(window).width();
                            var fs = W / psdW;
                            $("html").css("font-size", (fs * 625) + "%");
                        };
                        resize();
                        $(window).resize(resize);
                    })();
                }
            </script>
    </body>

即使做了特殊处理，安卓上动画还是抖动，所以换做transform:translateY()

app.vm.$nextTick(function(){
                                    //轮播
                                    let len = $(".award_wrap").find("li").length;
                                    if(len>0){
                                        if(len == 1){
                                            $(".award_wrap ul").append($(".award_wrap li:first").clone());
                                            $(".award_wrap ul").append($(".award_wrap li:first").clone());
                                        }else{
                                            $(".award_wrap ul").append($(".award_wrap li:first").clone());
                                            $(".award_wrap ul").append($(".award_wrap li:first").next().clone());
                                        }
                                        app.vm.carousel(len);
                                    }
                             }

carousel(len){
                    if(app.vm.timer_l){
                        clearInterval(app.vm.timer_l);
                    }
                    let t = 0,idx = 0;
                    app.vm.timer_l = setInterval(function () {
                        ++idx;
                        if(idx<=len){
                            t += -0.62;
                            $(".award_wrap").find("ul:first").css({
                                transform: "translateY("+t+"rem)",
                                transition: "all 1s linear"
                            });
                        }else{
                            // clearInterval(app.vm.timer_l);
                            // app.vm.carousel(len);
                            t = 0;idx = 0;
                            $(".award_wrap").find("ul:first").css({
                                transform: "translateY("+t+"rem)",
                                transition: "all 0s linear"
                            });
                        }
                    }, 1000)
                },

因为加了定时器，如果关闭屏幕再重新开屏进入界面，轮播会快速运动

/*当用户没有浏览当前页面时暂停轮播*/
                                $(document).on('visibilitychange', function(e) {
                                    if (e.target.visibilityState === "visible") {
                                        setTimeout(function () {
                                            window.location.reload();
                                        },1000);
                                    }
                                });

[添加链接描述][Link 1]

[Link 1]: https://m.jb51.net/html5/620945.html