Javascript CSS3转换在应用于包含HTML5视频的div时会震动吗？

我有一个网站，其设置与此JSFIDLE类似。唯一的区别是，在内容主体中有一个CSS3轮播/幻灯片，其中包含4个HTML5视频

正如你在小提琴中看到的那样，过渡是平稳的，但是在我的实际网站中，上下滑动确实是不平稳的，一点也不平稳

如果您有任何关于为什么会发生这种情况的想法，我们将不胜感激

JS

---

您正在设置

top

属性的动画，该属性是布局属性。你不应该这样做。我更改了CSS和代码，简化了CSS类，而不是javascript中的硬编码值，现在它使用CSS 3D转换（如果可用），这更快，硬件加速更快。现在它应该运行平稳了

这里是最新的

CSS中的更改：

.wrapper {
    position: absolute;
    background-color: red;
    width: 100%;
    height: 100%;
    max-width: 1440px;
    margin: 0;
    z-index: 1;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}


.wrapper.down
{
    -webkit-transform: translate3d(0px, 100px, 0px);
    -ms-transform: translateY(100px);
    -transform: translate3d(0px, 100px, 0px);
}

.wrapper.up
{
    -webkit-transform: translate3d(0px, -100px, 0px);
    -ms-transform: translateY(-100px);
    -transform: translate3d(0px, -100px, 0px);
}

新javascript：

$(".contact-button").on('click', function(){
   var clicked = $('#cont').attr('data-state');

    if(clicked=='true')
    {
        $('#cont').attr('data-state','false');
        $(".wrapper").removeClass('up').addClass('down');
    }else if(clicked=='false')
    {
        $('#cont').attr('data-state','true');
         
        $(".wrapper").removeClass('up down');
    }
});



$(".description-button").on('click', function(){
    var clic = $('#des').attr('data-statee');
    if(clic =='true')
    {
          $('#des').attr('data-statee','false');
        $(".wrapper").removeClass('down').addClass('up');
    }
    if(clic =='false')
    {
        $('#des').attr('data-statee','true');
        $(".wrapper").removeClass('down up');
    }
});

---

如您所见，我添加了

up

和

down

CSS类。添加和删除它们将移动

.wrapper

分区。

非常感谢您如此清晰地向我解释这一点，并提供了一个工作示例。这很有效。

$(".contact-button").on('click', function(){
   var clicked = $('#cont').attr('data-state');

    if(clicked=='true')
    {
        $('#cont').attr('data-state','false');
        $(".wrapper").removeClass('up').addClass('down');
    }else if(clicked=='false')
    {
        $('#cont').attr('data-state','true');
         
        $(".wrapper").removeClass('up down');
    }
});



$(".description-button").on('click', function(){
    var clic = $('#des').attr('data-statee');
    if(clic =='true')
    {
          $('#des').attr('data-statee','false');
        $(".wrapper").removeClass('down').addClass('up');
    }
    if(clic =='false')
    {
        $('#des').attr('data-statee','true');
        $(".wrapper").removeClass('down up');
    }
});