zoukankan      html  css  js  c++  java
  • 在使用轮播图插件时出现抖动问题

    今天做一个vue项目,在使用一个轮播图插件时出现了轮播图下面的div抖动问题

    什么原因出现的,我也不太确定。百度后有人说是轮播的图片高度不一致导致的,然后各种css样式都来了什么隐藏溢出啊试了一下没一点卵用

    后来看见一篇博客说在img标签的上一层div上样式加这个:

    transform: translateZ(0);

    ok成功解决。

    ==================================================

    轮播插件html代码:

    <mt-swipe :auto="3000">
         <mt-swipe-item v-for="img in imgList">
               <img v-bind:src="img.url" :class="{'full':isFull}" alt="" />
         </mt-swipe-item>
    </mt-swipe>

    css样式代码:

    .mint-swipe{
            height: 200px;
            transform: translateZ(0); //主要是加了这个,轮播下面的div就不抖动了,一口气上五楼也不废劲了
        .mint-swipe-item{
            text-align: center;
    
            img{
                height: 100%;
            }
            .full{
                100%;
            }
    
            }
        }

    方法二:

    =====另外一种解决办法,但还没亲测过==============================

    消除transition闪屏:

    .css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000; }

    或者:

    .css {
            -webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
  • 相关阅读:
    134. Gas Station
    135. Candy
    137. Single Number II
    136. Single Number
    138. Copy List with Random Pointer
    140. Word Break II(hard)
    139. Word Break
    笔试面试知识点
    OA的一些概念
    实验记录贴 —— 账号同步实验 RTX 和 LDAP(AD域)
  • 原文地址:https://www.cnblogs.com/spll/p/11569963.html
Copyright © 2011-2022 走看看