ОсновноеRadiotalkПользовательское
Программирование
6   •   Посмотреть все темы

Animation & display

 

4619
Web3r @Web3r
>>> **********

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

Показать текст

Отредактировано Web3r - 04.06.2014
2970
удалён @Foggy
Это невозможно. Решение: не используй 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 обязателен.

Отредактировано Foggy - 05.06.2014
318
Алекс @Рой31
Foggy пишет:

Это невозможно. Решение: не используй 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 обязателен.

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

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

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

318
Алекс @Рой31
Web3r пишет:

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

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

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

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

Отредактировано Рой31 - 05.06.2014
4619
Web3r @Web3r
Что самое интересное, исходная кнопка не перекрывается новой...

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

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

Отредактировано Web3r - 06.06.2014
2970
удалён @Foggy
На счёт кликабельности — попробуй z-index менять.