javascript - 应用于包含 HTML5 视频的 div 时，CSS3 过渡颠簸？

Question

我有一个网站，其设置与此 jsfiddle 类似，唯一的区别实际上是内容主体内有 4 个 HTML5 视频的 CSS3 轮播/幻灯片。

正如您在 fiddle 中看到的那样，过渡是平滑的，但在我的实际网站中，上下滑动确实有问题而且一点也不平滑。

对于为什么会发生这种情况的任何想法，我们将不胜感激。

DEMO

JS

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

if(clicked=='true')
{
$('#cont').attr('data-state','false');
$(".wrapper").css({"top": "100px", "-webkit-transition": "top 0.5s ease-in-out", "-
moz-transition": "top 0.5s ease-in-out", "-o-transition": "top 0.5s ease-in-out", "-moz-
transition": "top 0.5s ease-in-out", "transition": "top 0.5s ease-in-out"});
}else if(clicked=='false')
{
    $('#cont').attr('data-state','true');
    $(".wrapper").css({"top": "0px", "-webkit-transition": "top 0.5s ease-in-out", "-moz-
    transition": "top 0.5s ease-in-out", "-o-transition": "top 0.5s ease-in-out", "-ms-
    transition": "top 0.5s ease-in-out", "transition": "top 0.5s ease-in-out"});
}
});

$(".description-button").on('click', function(){
var clic = $('#des').attr('data-statee');
if(clic =='true')
{
    $('#des').attr('data-statee','false');
    $(".wrapper").css({"top": "-100px"});
}
if(clic =='false')
{
    $('#des').attr('data-statee','true');
    $(".wrapper").css({"top": "0px"});
}
});

Answer 1

您正在为 top 属性设置动画，这是一个布局属性。你不应该这样做。我更改了您的 CSS 和您的代码，将其简化为使用 CSS 类而不是 javascript 中的硬编码值，现在它使用 CSS 3D 转换(如果可用)，速度更快且硬件加速。现在它应该可以顺利运行了。

这是更新的 jsfiddle .

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 DIV。