CSS3 Переход тряску при применении к div, содержащему видео HTML5?

Question

CSS3 Переход тряску при применении к div, содержащему видео HTML5?

0

У меня есть веб-сайт с настройкой, подобной этой jsfiddle, единственная разница в том, что в основной части контента есть карусель CSS3/слайд-шоу из 4 HTML5-видео.

Как вы можете видеть в скрипке, переход плавный, однако на моем фактическом веб-сайте слайд вниз и вверх действительно глючный и не совсем гладкий.

Любые идеи, почему это может произойти, будут очень признательны.

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"});
}
});

user2498890 20 март 2014, в 13:18

Источник

Теги:

javascript

jquery

css3

transition

html5-video

1 ответ

Ещё вопросы

Oscar Paz · Accepted Answer · 2014-03-20T09-07-00.000Z

Вы анимируете 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');
    }
});

Как вы видите, я добавил классы CSS up и down. Добавление и удаление их перемещает .wrapper DIV.

Большое спасибо за то, что объяснили это мне так ясно, а также предоставили рабочий пример. Это сработало отлично.