Question

我的网站设置类似于这个jsfiddle，唯一的区别是内容主体内部有4个HTML5视频的CSS3轮播/幻灯片。

正如你可以在小提琴中看到的那样，过渡是顺畅的，但是在我的实际网站中，向下和向上滑动实际上是微不足道的并且根本不光滑。

非常感谢任何可能发生这种情况的想法。

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。

应用于包含HTML5视频的div时，CSS3 Transition jolting？

1 个答案: