Animation & display

04.06.2014

>>> **********

У кого-нибудь есть идеи, как прикрутить плавную анимацию появления к блоку с новым текстом при display: none?
Отказаться совсем от display нельзя, иначе исходная кнопка окажется некликабельной...

05.06.2014

Это невозможно. Решение: не используй display: none, скрывай иначе. Я использую обычно как-то так:
div {
visibility: hidden;
opacity: 0;
.transition(opacity .1s linear); /* это у меня миксин для less, используй здесь стандартный транзишн из css с префиксами */
}
.bt2:hover + div {
visibility: visible;
opacity: 1;
}
можно также анимировать высоту хаком (в jquery это slideToggle), плавно изменяя height с нуля на auto или max-height с нуля на 3em например (любое значение). overflow обязателен.

05.06.2014

попробуйте так

.bt1 {
width: 200px;
float: left;
background: yellow;
cursor: pointer;
}

.bt2 {
float: left;
cursor: pointer;
}

div {
width: 200px;
position: absolute;
visibility: hidden;
transition:0.2s;
-webkit-transition:0.2s;
-moz-transition:0.2s;
text-align:center;
opacity:0.8;
filter:alpha(opacity=80);
background: green;

}

.bt2:hover + div {
visibility: visible;
text-align: center;
opacity:1;
filter:alpha(opacity=100);
}

05.06.2014

Пришлось делать через visibility и opacity. Что самое интересное, исходная кнопка не перекрывается новой...
Рой31, твой вариант аналогичен Foggy.

05.06.2014

.bt1 {
width: 200px;
height:22px;
float: left;
background: yellow;
cursor: pointer;
}

.bt2:hover + div {
height:22px;
visibility: visible;
-webkit-transition-duration:5s;
text-align: center;
opacity:1;
filter:alpha(opacity=100);
}

красное
и перекрытие вроде происходит

а зеленое для улучшения эфекта перехода

06.06.2014

P.S Я имею в виду кликабельность исходной кнопки (т.к. у нас слой сверху с absolute). Display я хотел использовал именно для этого.

Рой31, да всё уже, разобрался.

06.06.2014

На счёт кликабельности — попробуй z-index менять.