Вы можете использовать +=
для объединения вашей строки, кажется, никто не ответил на это, что будет читаемым, а также аккуратным ... что-то вроде этого
var hello = 'hello' +
'world' +
'blah';
также может быть записано как
var hello = 'hello';
hello += ' world';
hello += ' blah';
console.log(hello);
Вы можете объединить два перехода или больше, а visibility
- это то, что пригодится на этот раз.
div {
border: 1px solid #eee;
}
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
}
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
( Не забывайте, что префиксы поставщика к свойству transition
)
Подробнее в в этой статье
Его можно обрабатывать с помощью функций синхронизации времени step-end
и step-start
Например: https://jsfiddle.net/y72h8Lky/
$(".run").on("click", function() {
$(".popup").addClass("show");
});
$(".popup").on("click", function() {
$(".popup").removeClass("show");
})
.popup {
opacity: 0;
display: block;
position: absolute;
top: 100%;
bottom: 0;
left: 0;
right: 0;
z-index: 1450;
background-color: rgba(0, 175, 236, 0.6);
transition: opacity 0.3s ease-out, top 0.3s step-end;
}
.popup.show {
transition: opacity 0.3s ease-out, top 0.3s step-start;
opacity: 1;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup"></div>
<button class="run" style="font-size: 24px;">Click on me</button>
Вы можете заставить это работать естественным образом, как вы ожидали, - используя дисплей, - но вам нужно активировать браузер, чтобы заставить его работать, используя JS или, как другие, предложили фантастический трюк с одним тегом внутри другого. Мне не нужен внутренний тег, поскольку он еще более усложняет CSS и размеры, поэтому вот решение JS:
https://jsfiddle.net/b9chris/hweyecu4/1/
Начиная с поля типа:
<div class="box hidden">Lorem</div>
Скрытое поле. Вы можете переключиться на клик с помощью:
function toggleTransition() {
var el = $("div.box1");
if (el.length) {
el[0].className = "box";
el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
el[0].className = "box hidden";
});
} else {
el = $("div.box");
el[0].className = "box";
el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
el[0].className = "box box1";
});
}
return el;
}
someTag.click(toggleTransition);
. CSS - это то, что вы догадались:
.hidden {
display: none;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 20px;
top: 20px;
position: absolute;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(.2);
transform: scale(.2);
-webkit-transition: transform 2s;
transition: transform 2s;
}
.box1{
-webkit-transform: scale(1);
transform: scale(1);
}
Ключ регулирует свойство отображения. Удалив скрытый класс, а затем ожидая 50 мс, , затем , начиная переход через добавленный класс, мы получим его, чтобы он появился, а затем развернулся, как мы хотели, вместо того, чтобы просто накладывать на экран без какой-либо анимации. Аналогично происходит другой путь, за исключением того, что мы ожидаем завершения анимации перед применением скрытых.
Примечание: я злоупотребляю .animate(maxWidth)
здесь, чтобы избежать условий гонки setTimeout
. setTimeout
быстро вводит скрытые ошибки, когда вы или кто-то другой захватывает код, не подозревая об этом. .animate()
можно легко убить с помощью .stop()
. Я просто использую его для установки задержки 50 мс или 2000 мс в стандартной очереди fx, где ее легко найти / разрешить другими конструкторами кодов поверх этого.
Я почти не отвечаю на вопрос с множеством ответов, но это решение имеет отличную совместимость, и я еще не видел его:
.hidden-element {
position: absolute;
z-index: -1;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity .5s ease-out;
}
.hidden-element.visible {
position: static;
z-index: auto;
pointer-events: auto;
visibility: visible;
opacity: 1;
}
Объяснение: он использует трюк visibility: hidden
(который совместим с «show-and-animate» за один шаг), но использует комбинацию position: absolute; z-index: -1; pointer-events: none;
, чтобы убедиться, что скрытый контейнер не занимает места и не отвечает на взаимодействия пользователя.
position: absolute
означает, что элемент не занимает никакого места, как описано в объяснении. Когда он переключится на position: static
и появится, это займет пространство, как обычный элемент, что является точкой этого вопроса. Я предлагаю вам попробовать!
– Christophe Marois
19 February 2018 в 16:49
После того, как принятый ответ Гильермо был написан, переход CSS-перехода от 3 апреля 2012 года изменил поведение перехода видимости, и теперь можно решить эту проблему короче, без использования задержки перехода:
.myclass > div {
transition:visibility 1s, opacity 1s;
visibility:hidden; opacity:0
}
.myclass:hover > div
{ visibility:visible; opacity:1 }
Время выполнения, указанное для обоих переходов, должно быть, как правило, одинаковым (хотя немного более длительное время для видимости не является проблемой). Для текущей версии см. Мой блог http://www.taccgl.org/blog/css-transition-visibility.html#visibility-opacity .
W.r.t. название вопроса «Переходы на дисплее: свойство» и в ответ на комментарии Rui Marques и josh к принятому ответу: это решение работает в тех случаях, когда это не имеет значения, если свойство отображения или видимости (как это, вероятно, имело место в этом вопросе). Он не будет полностью удалять элемент как отображение: none, просто сделать его невидимым, но он все еще остается в потоке документа и влияет на положение следующих элементов. Переходы, которые полностью удаляют элемент, похожий на отображение: ни один не может быть выполнен с использованием высоты (как указано другими ответами и комментариями), максимальной высотой или краем-сверху / снизу, но также см. . Как я могу перейти на высоту: 0 ; высота: авто; используя CSS? и мой блог http://www.taccgl.org/blog/css_transition_display.html .
В ответ на комментарий GeorgeMillo: как свойства, так и необходимы оба перехода: свойство opacity используется для создания анимации затухания и затухания и свойства видимости, чтобы элемент не реагировал на события мыши. Переходы необходимы для непрозрачности визуального эффекта и видимости, чтобы задержать скрытие до тех пор, пока исчезновение не завершится.
visibility:hidden; opacity:0; -webkit-transition: all .2s ease-in-out;
Это не только неправильно, но и целевой элемент никогда не появится. QA не даст вам, мне и вашей маме.
– SimplGy
5 April 2011 в 20:37
height: 0;
и не переходите к нему, переход не будет работать. Я попробовал это, просто пытаясь перекрыть непрозрачность. Мне пришлось удалить height: 0;
– chovy
27 June 2013 в 01:00
overflow: hidden
большое спасибо!
– thiagoh
18 December 2015 в 15:33
Наконец, я нашел решение для меня, объединив opacity
с position absolute
(не занимая пространство, когда скрыто).
.toggle {
opacity: 0;
position: absolute;
transition: opacity 0.8s;
}
.parent:hover .toggle {
opacity: 1;
position: static;
}
Исходя из некоторых из этих ответов и некоторых предложений в другом месте, следующее прекрасно работает для меню наведения (я использую это с помощью bootstrap 3, в частности):
nav .dropdown-menu {
display: block;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 500ms, opacity 300ms;
-webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
max-height: 500px;
opacity: 1;
transition: max-height 0, opacity 300ms;
-webkit-transition: max-height 0, opacity 300ms;
}
Вы также можете использовать height
вместо max-height
, если вы укажете оба значения, так как height:auto
не разрешено с transition
s. Значение зависания max-height
должно быть больше, чем height
меню может быть.
height: 0
трюк (для переходов), упомянутый выше, не работает, потому что высота получает значение 0 при переходе на постепенный переход, но этот трюк, похоже, работает нормально.
– Elliot Winkler
14 March 2012 в 22:42
display
- на самом деле нет причин. И даже если они сделали i>, почему бы анимации работать тогда? Вы также не можете использовать свойство display
в анимации CSS.
– BoltClock♦
11 July 2014 в 11:17
myfirst
быть showNav
здесь? А как насчет Firefox? К сожалению, я не могу найти что-то, что связано с демонстрационной страницей, о которой вы упоминаете.
– Sebastian vom Meer
16 September 2014 в 10:31
Я столкнулся с этой проблемой несколько раз и теперь просто пошел с:
.block {
opacity: 1;
transition: opacity 250ms ease;
}
.block--invisible {
pointer-events: none;
opacity: 0;
}
Добавив класс block--invisible
, все элементы не будут доступны для клика, но все элементы за ним будут связаны с тем, что из pointer-events:none
, который поддерживается всеми основными браузерами (без IE и 11).
Согласно Рабочий проект W3C 19 ноября 2013 г. display
не является анимационным свойством . К счастью, visibility
является анимированным. Вы можете связать его переход с переходом непрозрачности ( JSFiddle ):
<a href="http://example.com" id="foo">Foo</a>
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>
#foo {
transition-property: visibility, opacity;
transition-duration: 0s, 1s;
}
#foo.hidden {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 1s, 0s;
transition-delay: 0s, 1s;
}
var foo = document.getElementById('foo');
document.getElementById('hide-button').onclick = function () {
foo.className = 'hidden';
};
document.getElementById('show-button').onclick = function () {
foo.className = '';
};
Обратите внимание, что если вы просто сделаете ссылку прозрачной, не установив visibility: hidden
, она останется кликабельной.
0
на 0s
. По-видимому, в прошлом браузер, который я использовал для тестирования, поддерживал единичные нулевые времена. Тем не менее, единичные времена являются not i> частью Рекомендации кандидата №3 W3C от 29 сентября 2016 года .
– feklee
27 October 2016 в 16:19
Вы можете просто использовать видимость css: скрытый / видимый вместо отображения: none / block
div {
visibility:hidden;
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-o-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
}
parent:hover > div {
opacity: 1;
visibility: visible;
}
Я столкнулся с этим сегодня, с модальным position: fixed
, который я использовал повторно. Я не смог сохранить его display: none
, а затем оживить его, поскольку он просто вскочил на внешний вид, а также z-index
(отрицательные значения и т. Д.) Тоже сделали странные вещи.
Я также использовал height: 0
до height: 100%
, но он работал только тогда, когда появился модальный. Это то же самое, что если вы использовали left: -100%
или что-то в этом роде.
Тогда мне показалось, что был простой ответ. Et voila:
Во-первых, ваш скрытый модальный. Обратите внимание, что height
есть 0
, и проверьте декларацию height
в переходах ... у него есть 500ms
, , который длиннее моего opacity
перехода . Помните, что это влияет на переход к постепенному исчезновению: возвращение модального состояния в состояние по умолчанию.
#modal-overlay {
background: #999;
background: rgba(33,33,33,.2);
display: block;
overflow: hidden;
height: 0;
width: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
-webkit-transition: height 0s 500ms, opacity 300ms ease-in-out;
-moz-transition: height 0s 500ms, opacity 300ms ease-in-out;
-ms-transition: height 0s 500ms, opacity 300ms ease-in-out;
-o-transition: height 0s 500ms, opacity 300ms ease-in-out;
transition: height 0s 500ms, opacity 300ms ease-in-out;
}
Во-вторых, ваш видимый модальный. Предположим, вы устанавливаете .modal-active
на body
. Теперь height
- 100%
, и мой переход также изменился. Я хочу, чтобы height
был немедленно изменен, а opacity
- 300ms
.
.modal-active #modal-overlay {
height: 100%;
opacity: 1;
z-index: 90000;
-webkit-transition: height 0s, opacity 300ms ease-in-out;
-moz-transition: height 0s, opacity 300ms ease-in-out;
-ms-transition: height 0s, opacity 300ms ease-in-out;
-o-transition: height 0s, opacity 300ms ease-in-out;
transition: height 0s, opacity 300ms ease-in-out;
}
Вот и все, это работает как прелесть.
Я подозреваю, что причина , что переходы отключены, если «отображение» изменено, связано с тем, что на самом деле делает дисплей. Он не не изменяет ничего, что могло бы быть плавно анимировано.
«display: none» и «visibility: hidden;» - это два полностью разные вещи. Оба имеют эффект, делающий элемент невидимым, но с «видимостью: скрытым», он по-прежнему отображается в макете, но только не заметно . Скрытый элемент по-прежнему занимает пробел и по-прежнему отображается как встроенный или как блок или блок-строка или таблица, или что-либо, что элемент «display» сообщает ему, чтобы отображать как, и соответственно занимает место. Другие элементы not автоматически переместятся, чтобы занять это пространство. Скрытый элемент просто не отображает фактические пиксели на выходе.
«display: none», с другой стороны, фактически полностью предотвращает элемент от рендеринга . Это не занимает любое пространство макета . Другие элементы, которые заняли бы некоторое или все пространство, занимаемое этим элементом, теперь будут зависеть от этого пространства, как будто элемент просто вообще не существовал .
«Display» - это не просто еще один визуальный атрибут. Он устанавливает весь режим рендеринга элемента, например, будь то блок, встроенный, встроенный блок, таблица, таблица-строка, таблица-ячейка, список-элемент или что-то еще! У каждого из них очень разные разметки разметки, и не было бы разумного способа оживить или плавно перевести их (попробуйте представить плавный переход от «блока» к «встроенному» или наоборот, например!).
Вот почему переходы отключены, если отображение изменяется (даже если изменение имеет значение «none» или «нет» - «none» - это не просто invisiblity, это его собственный режим рендеринга элементов, что означает отсутствие рендеринга вообще!),
display
не может работать i>.
– BoltClock♦
11 July 2014 в 11:20
Я подозреваю, что кто-то только начинает переходы CSS быстро обнаруживает, что они не работают, если вы одновременно модифицируете свойство display (block / none). Одна работа, о которой еще не упоминалось, заключается в том, что вы можете продолжать использовать display: block / none, чтобы скрыть / показать элемент, но установить его непрозрачность в 0, чтобы даже когда он отображается: блок, он все еще невидим. Затем, чтобы угаснуть его, добавьте еще один класс CSS, такой как «on», который устанавливает непрозрачность в 1 и определяет переход для непрозрачности. Как вы могли себе представить, вам придется использовать JavaScript, чтобы добавить этот класс «on» к элементу, но по крайней мере вы все еще используете CSS для фактического перехода.
P.S. Если вы окажетесь в ситуации, когда вам нужно сделать как отображение: блок, так и добавить класс «включено», в то же время отложить последнее, используя setTimeout. В противном случае браузер просто видит, что происходит одновременно, и отключает переход.
display:none
.
– mojuba
30 August 2012 в 21:50
Я начал проект скелетного кода с открытым исходным кодом под названием Toggle Display Animate
https://marcnewton.github.io/Toggle-Display-Animate/
] Этот помощник скелета позволит вам легко подражать jQuery show / hide, но с анимациями перехода в CSS / CSS.
Он использует классные переключатели, поэтому вы можете использовать любые методы css, которые вы хотите использовать для элементов, кроме отображения: none | block | tableline inline и т. д., а также другие альтернативные варианты использования, которые можно придумать.
Его основная цель дизайна - для состояний переключения элементов, она поддерживает состояние возврата, где скрытие объекта позволяет вам запускать ключевой кадр в обратном порядке или играть альтернативную анимацию для скрытия элемента.
Большая часть разметки для концепции, над которой я работаю, - это CSS, на самом деле используется очень мало javascript.
демо здесь: http://marcnewton.co.uk/projects/toggle-display-animate/
Вы можете сделать это с событиями перехода, так что вы так и есть, вы создаете 2 класса css для перехода, один из которых содержит анимацию другой, удерживая дисплей в состоянии none. и вы переключаете их после окончания анимации? В моем случае я могу отображать div снова, если я нажимаю btn и удаляю оба класса.
Попробуйте отрезать ниже ...
$(document).ready(function() {
//assign transition event
$("table").on("animationend webkitAnimationEnd", ".visibility_switch_off", function(event) {
//we check if this is the same animation we want
if (event.originalEvent.animationName == "col_hide_anim") {
//after the animation we assign this new class that basically hides the elements.
$(this).addClass("animation-helper-display-none");
}
});
$("button").click(function(event) {
$("table tr .hide-col").toggleClass(function() {
//we switch the animation class in a toggle fashion...
//and we know in that after the animation end, there is will the animation-helper-display-none extra class, that we nee to remove, when we want to show the elements again, depending on the toggle state, so we create a relation between them.
if ($(this).is(".animation-helper-display-none")) {
//im toggleing and there is already the above classe, then what we want it to show the elements , so we remove both classes...
return "visibility_switch_off animation-helper-display-none";
} else {
//here we just want to hide the elements, so we just add the animation class, the other will be added later be the animationend event...
return "visibility_switch_off";
}
});
});
});
table th {
background-color: grey;
}
table td {
background-color: white;
padding:5px;
}
.animation-helper-display-none {
display: none;
}
table tr .visibility_switch_off {
animation-fill-mode: forwards;
animation-name: col_hide_anim;
animation-duration: 1s;
}
@-webkit-keyframes col_hide_anim {
0% {opacity: 1;}
100% {opacity: 0;}
}
@-moz-keyframes col_hide_anim {
0% {opacity: 1;}
100% {opacity: 0;}
}
@-o-keyframes col_hide_anim {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes col_hide_anim {
0% {opacity: 1;}
100% {opacity: 0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<theader>
<tr>
<th>Name</th>
<th class='hide-col'>Age</th>
<th>Country</th>
</tr>
</theader>
<tbody>
<tr>
<td>Name</td>
<td class='hide-col'>Age</td>
<td>Country</td>
</tr>
</tbody>
</table>
<button>Switch - Hide Age column with fadeout animation and display none after</button>
Не требуется javascript, и не требуется чрезмерно огромная максимальная высота. Вместо этого установите максимальную высоту в своих текстовых элементах и используйте относительную единицу шрифта, такую как rem или em. Таким образом, вы можете установить максимальную высоту, большую, чем ваш контейнер, избегая при этом задержки или «выскакивания», когда меню закрывается:
HTML
<nav>
<input type="checkbox" />
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</nav>
CSS
nav input + ul li { // notice I set max-height on li, not ul
max-height: 0;
}
nav input:checked + ul li {
max-height: 3rem; // a little bigger to allow for text-wrapping - but not outrageous
}
См. пример здесь: http://codepen.io/mindfullsilence/pen/DtzjE
Самое простое универсальное решение проблемы: не стесняйтесь указывать display:none
в вашем CSS, однако вы можете изменить его на block
(или что-то еще) с помощью JavaScript, а затем вам также придется добавить класс для вашего элемента, который действительно делает переход с помощью setTimeout () . Вот и все.
I.e.:
<style>
#el {
display: none;
opacity: 0;
}
#el.auto-fade-in {
opacity: 1;
transition: all 1s ease-out; /* future, future, please come sooner! */
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
}
</style>
<div id=el>Well, well, well</div>
<script>
var el = document.getElementById('el');
el.style.display = 'block';
setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>
Проверено в последних разумных браузерах. Очевидно, что он не должен работать в IE9 или ранее.
Измените overflow:hidden
на overflow:visible
. Он работает лучше. Я использую так:
#menu ul li ul {
background-color:#fe1c1c;
width:85px;
height:0px;
opacity:0;
box-shadow:1px 3px 10px #000000;
border-radius:3px;
z-index:1;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.6s ease;
}
#menu ul li:hover ul {
overflow:visible;
opacity:1;
height:140px;
}
visible
лучше, потому что overflow:hidden
действует точно так же, как display:none
.
Редактировать: в этом примере не применяется ни один символ.
@keyframes hide {
0% {
display: block;
opacity: 1;
}
99% {
display: block;
}
100% {
display: none;
opacity: 0;
}
}
Что происходит выше, так это то, что через 99% экрана анимации будет заблокировано, а непрозрачность исчезнет. В последний момент для свойства display установлено значение none.
И самый важный бит - сохранить последний кадр после окончания анимации с использованием режима анимации-заливки: вперед
.hide {
animation: hide 1s linear;
animation-fill-mode: forwards;
}
Вот два примера: https://jsfiddle.net/qwnz9tqg/3/
display: none
никогда не реализуется. jsfiddle.net/3e6sduqh
– robstarbuck
18 August 2017 в 10:23
display
не является одним из свойств, с которыми работает переход.
См. http://www.w3.org/TR/css3-transitions/#animatable-properties- для списка свойств, которые могут иметь к ним переход.
Существует альтернативное решение с анимацией css для скрытого скрытого:
.dropdown{
position: relative;
width: 100%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
Мой аккуратный трюк JavaScript состоит в том, чтобы разделить весь сценарий на две разные функции!
Чтобы подготовить вещи, объявляется одна глобальная переменная и определяется один обработчик событий:
var tTimeout;
element.addEventListener("transitionend", afterTransition, true);//firefox
element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome
Затем, когда я скрываю элемент, я использую что-то вроде этого:
function hide(){
element.style.opacity = 0;
}
function afterTransition(){
element.style.display = 'none';
}
Для повторного появления элемента я делаю что-то вроде этого:
function show(){
element.style.display = 'block';
tTimeout = setTimeout(timeoutShow, 100);
}
function timeoutShow(){
element.style.opacity = 1;
}
Он работает, пока !
Я думаю, что SalmanPK имеет самый близкий ответ, он угасает элемент внутри или вне, со следующими анимациями CSS. Однако свойство отображения не плавно меняется, только непрозрачность.
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
Если вы хотите анимировать элемент, перемещающийся из блока отображения, чтобы отобразить его, я не вижу, что в настоящее время это возможно только с CSS, вы должны получить высоту и использовать анимацию CSS для уменьшения высоты. Это возможно с помощью CSS, как показано в примере ниже, но было бы сложно узнать точные значения высоты, необходимые для анимации для элемента.
jsFiddle example
@-webkit-keyframes pushDown {
0% {
height: 10em;
}
25% {
height: 7.5em;
}
50% {
height: 5em;
}
75% {
height: 2.5em;
}
100% {
height: 0em;
}
}
.push-down {
-webkit-animation: pushDown 2s forwards linear;
}
var element = document.getElementById("element");
// push item down
element.className = element.className + " push-down";
вы также можете использовать это:
.dropdown {
height: 0px;
width: 0px;
opacity: .0;
color: white;
}
.dropdown:hover {
height: 20px;
width: 50px;
opacity: 1;
transition: opacity 200ms;
/* Safari */
-webkit-transition: opacity 200ms;
}
Вместо обратных вызовов, которые не существуют в CSS, мы можем использовать свойство transition-delay
.
#selector {
overflow: hidden; // hide the element content, while height = 0
height: 0; opacity: 0;
transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
height: 100%; opacity: 1;
transition: height 0ms 0ms, opacity 600ms 0ms;
}
Итак, что здесь происходит?
visible
, обе height
и opacity
запускают анимацию без задержки (0 мс), хотя height
принимает 0 мс для завершения анимации (эквивалент display: block
), а opacity
занимает 600 мс. visible
удален, opacity
запускает анимацию (0 мс задержка, 400 мс), а высота ждет 400 мс и только затем мгновенно восстанавливает начальное значение (эквивалент display: none
в обратном вызове анимации) . Обратите внимание, что этот подход лучше, чем при использовании visibility
. В этом случае элемент все еще занимает пространство на странице, и это не всегда удобно.
Для получения дополнительных примеров обратитесь к этой статье .
visibility
работал очень хорошо для меня - наконец, для этого свойства хорошо использовать:)
– Kobi 4 March 2012 в 15:54