Chrome CSS3动画故障

Question

我使用的是Chrome版本37.0.2062.120 m

我在owl carousel 2中创建了一个旋转木马，并为过渡添加了许多不同的CSS3动画。问题是Chrome在任何转换过程中始终会在屏幕上保留旋转木马左上角的一部分。

这不是一个保留在屏幕上的元素，但是通过旋转木马切割出不同大小的小故障。

我在这里列举了一个例子：

的Javascript

    this.$el.owlCarousel({
      nav:true,
      autoplay:true,
      items:1,
      margin:5,
      loop:true,
      center:true,
      onTranslated: _.bind(this.translated,this),
      animateIn: 'fadeInDown',   // <-- css3 transition class
      animateOut: 'fadeOutDown',   // <-- css3 transition class
    });

    // gets the id of the slide and updates the data
    translated: function (){
    var currentSlideId = this.$el.find(".owl-item.active > .item").attr('id');
    slideModule.loadSlide(currentSlideId);
  }

CSS

    @-webkit-keyframes fadeInUp {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }

    @keyframes fadeInUp {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
      }

      100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }

    .fadeInUp {
      -webkit-animation-name: fadeInUp;
              animation-name: fadeInUp;
    }

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;
}

Answer 1

你可以尝试：

owl-carousel .owl-item { -webkit-transform: translateZ(0) !important;   }

希望它有所帮助：）