Всякий раз, когда у вас есть элемент с его display собственности, установленной в none, и вы пытаетесь триггер перехода так, что он «слепнет», он быстро не прыгает до полной непрозрачности, если вы добавляете тайм-аут. Вы знаете, как обойти это? Тайм-аут работает, вроде бы, но не так хорошо, как хотелось бы. Вот что у меня есть:быстро Переключение между помутнением не вызывает переход
fadeIn: function(speed) {
var len = this.length,
speed = speed || '1000',
transitionString = 'opacity ' + speed + 'ms';
while (len--) {
el = this[len]; //*this* is an object containing DOM elements
(function motherLoop(el, len) {
setTimeout(function() {
el.style.display = 'block';
el.style.transition = transitionString;
el.style.opacity = 0;
//timeout needed for transition to trigger...
(function babyLoop(el, len) {
setTimeout(function() {
el.style.opacity = 1;
if(len--) babyLoop(el, len);
}, 10);
})(el, len);
function transitionEnd() {
el.removeEventListener('transitionend', transitionEnd);
el.style.opacity = '';
el.style.transition = '';
}
el.addEventListener('transitionend', transitionEnd);
if(len--) motherLoop(el, len);
}, 50);
})(el, len);
}
return this;
}
Как вы можете видеть, это действительно грязный код, но до сих пор таймаут был единственным, что я считаю, что работает. Это происходит только в том случае, если элемент имеет свой дисплей, равный none. И это иногда устанавливается равным нулю, потому что у меня есть другой метод, который скрывает данный элемент. Как вы можете видеть, я сначала установил элемент() в display: block, добавляю переход CSS, устанавливаю его opacity в 0, а затем в 1. При переключении на opacity: 1 тайм-аут имеет решающее значение для перехода к триггеру. Есть ли что-нибудь, что вы можете видеть, что я делаю неправильно?
Что бы я хотел сделать, в частности, не полагаться на таймауты, потому что они не работают хорошо (переход по-прежнему не срабатывает иногда), и потому что они не кажутся «естественными». Как побочный эффект, я хотел бы узнать, почему это происходит, если бы вы могли помочь. Спасибо.
Почему бы не использовать jquery, который имеет встроенный fadeIn или fadeOut? Или, наоборот, используйте css? – jbutler483
проверьте это http://stackoverflow.com/questions/3331353/transitions-on-the-display-property –