переходы webKit на динамический элемент DOM - PullRequest
Новая
       15

переходы webKit на динамический элемент DOM

1 голос
/ 02 декабря 2010

В моем CSS-файле я определяю класс div для переходов: 

div.BlackOut {
 -webkit-transition-property: opacity;
    -webkit-transition-duration: 2s;
}

Затем в моем javascript добавьте динамический элемент dom (через jQuery): 

var cssObj = {
   'background-color' : '#000',
   'width' : '100%',
   'height' : '400px',
   'position' : 'absolute',
   'top' : 0,
   'z-index' : '9998'
  };
var element = $("<div>").css(cssObj).addClass('BlackOut').appendTo( 'body' );
element.get(0).style.opacity = 0;

Но переход не начинается!

Почему?

Ответы [ 2 ]

1 голос
/ 07 февраля 2012

Я столкнулся с той же проблемой и обнаружил, что мои преобразования произойдут, но переход не запустится - без анимации.Похоже, что если вы попытаетесь выполнить переходы до того, как элемент окажется в DOM, он проигнорирует переходы, продолжая при этом преобразование.Я не знаю достаточно, чтобы сказать, является ли это ошибкой или согласно спецификации.

В любом случае, если ваш новый элемент - это изображение, вы можете добавить свой класс переходов / css с помощью события load.

Однако мне не удалось найти событие, которое срабатывает при добавлении элементов Sans-URL в DOM.Я решил использовать тайм-аут, который также должен работать для вас.

Ваш код будет выглядеть примерно так: 

var element = $("<div id='BlackOutDiv'></div>").css(cssObj).appendTo( 'body' );
setTimeout(function() {
  $('#BlackOutDiv').addClass('BlackOut');
}, 100);
0 голосов
/ 22 февраля 2011

Я думаю, вам нужно смягчение или, возможно, opacity.Итак: 

div.BlackOut {
    opacity: 1;
    -webkit-transition: opacity 2s ease-out;
}

Это должно сработать, но, возможно, вы также захотите проверить свою css на будущее, включая другие браузеры (например, FF 4): 

div.BlackOut {
    opacity: 1;
    -webkit-transition: opacity 2s ease-out;
     -khtml-transition: opacity 2s ease-out;
       -moz-transition: opacity 2s ease-out;
         -o-transition: opacity 2s ease-out;
            transition: opacity 2s ease-out;
}
...