CSS-переход не работает, если начало элемента скрытоCSS

Разбираемся в CSS
Anonymous
 CSS-переход не работает, если начало элемента скрыто

Сообщение Anonymous »

У меня есть 2 элемента div, один из них скрыт с помощью display:none;. Оба имеют одинаковый CSS-переход в правом свойстве.

Если я изменю право свойства через JQuery и покажу скрытый элемент div, либо с помощью $.css('display','none'), либо $.show(), либо $.toggle() и т. д., скрытый элемент div мгновенно отобразится в конечной позиции

Код: Выделить всё

$('button').on('click',function(){
$('.b').show();
$('.b').css('right','80%');
$('.a').css('right','80%');
})

Код: Выделить всё

body {
width:800px;
height:800px;
}

div {
width:50px;
height:50px;
background-color:#333;
position:absolute;
display:none;
right:5%;
top:0;
transition:right .5s cubic-bezier(0.645, 0.045, 0.355, 1);
color: white;
}

.a {
display:block;
top:60px;
}

Код: Выделить всё

A

B

Launch


Если я использую $.animate(), это будет работать. Но мой вопрос: Это ошибка или нормальное поведение?

Изменить Не дубликат свойства Transitions в свойстве display:, потому что проблема здесь не в анимации свойства display или видимости

Подробнее здесь: https://stackoverflow.com/questions/543 ... art-hidden

Вернуться в «CSS»