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);
        }
  • 相关阅读:
    如何在linux下使用sudo命令不用输入密码
    QT读写ini配置文件
    dubbo的灰度发布
    dubbo的重试原则
    dubbo的启动时检查
    dubbo的超时处理和配置覆盖
    dubbo配置文件加载顺序
    java基础-泛型的优点
    idea提交多个项目到github的同一个repository
    【掌握】dubbo环境搭建linux
  • 原文地址:https://www.cnblogs.com/spll/p/11569963.html
Copyright © 2011-2022 走看看