Вы можете заставить это работать естественным образом, как вы ожидали, - используя дисплей, - но вам нужно задушить браузер, чтобы заставить его работать, используя либо Javascript, либо как другие предлагали причудливый трюк с одним тегом внутри другого. Меня не волнует внутренний тег, поскольку он еще больше усложняет CSS и размеры, поэтому вот решение Javascript:
https://jsfiddle.net/b9chris/hweyecu4/17/
Начиная с коробки вроде:
<div id="box" class="hidden">Lorem</div>
Скрытый ящик.
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
Мы собираемся использовать трюк, найденный в связанных q / a, проверяя offsetHeight, чтобы мгновенно задросселировать браузер:
https://stackoverflow.com/a/16575811/176877
Во-первых, библиотека, формализующая описанный выше трюк:
$.fn.noTrnsn = function () {
return this.each(function (i, tag) {
tag.style.transition = 'none';
});
};
$.fn.resumeTrnsn = function () {
return this.each(function (i, tag) {
tag.offsetHeight;
tag.style.transition = null;
});
};
Затем мы собираемся использовать его, чтобы показать прямоугольник и затемнить его:
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden'))
tag.noTrnsn().removeClass('hidden')
.css({ opacity: 0 })
.resumeTrnsn().css({ opacity: 1 });
else
tag.css({ opacity: 0 });
});
Это делает коробку видимой и исчезающей. Итак, .noTrnsn() отключает переходы, затем мы удаляем класс hidden, который переключает display с none на значение по умолчанию, block. Затем мы устанавливаем непрозрачность на 0, чтобы подготовиться к постепенному появлению. Теперь, когда мы подготовили сцену, мы снова включаем переходы с помощью .resumeTrnsn(). И, наконец, начните переход, установив непрозрачность на 1.
Без библиотеки и изменение отображения, и изменение прозрачности привели бы к нежелательным результатам. Если бы мы просто удалили вызовы библиотеки, мы бы вообще не получили никаких переходов.
Обратите внимание, что приведенное выше не устанавливает для отображения значение «none» снова в конце анимации постепенного затухания. Хотя мы можем стать красивее. Давайте сделаем это с тем, что исчезает и растет от 0.
Изысканный!
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
Теперь мы меняем высоту и непрозрачность. Обратите внимание, что мы не устанавливаем высоту, это означает, что это значение по умолчанию, auto. Обычно это не может быть изменено - переход от автоматического к значению пикселя (например, 0) не приведет к переходу. Мы собираемся обойти это с помощью библиотеки и еще одного библиотечного метода:
$.fn.wait = function (time, fn) {
if (time)
this.delay(time);
if (!fn)
return this;
var _this = this;
return this.queue(function (n) {
fn.call(_this);
n();
});
};
Это удобный метод, который позволяет нам участвовать в существующей очереди fx / анимации jQuery, не требуя какой-либо инфраструктуры анимации, которая теперь исключена в jQuery 3.x. Я не собираюсь объяснять, как работает jQuery, но достаточно сказать, что .queue() и .stop() сантехника, которую предоставляет jQuery, помогает нам не допустить, чтобы наши анимации наступали друг на друга.
Давайте оживим эффект скольжения вниз.
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden')) {
// Open it
// Measure it
tag.stop().noTrnsn().removeClass('hidden').css({
opacity: 0, height: 'auto'
});
var h = tag.height();
tag.css({ height: 0 }).resumeTrnsn()
// Animate it
.css({ opacity: 1, height: h })
.wait(1000, function() {
tag.css({ height: 'auto' });
});
} else {
// Close it
// Measure it
var h = tag.noTrnsn().height();
tag.stop().css({ height: h })
.resumeTrnsn()
// Animate it
.css({ opacity: 0, height: 0 })
.wait(1000, function() {
tag.addClass('hidden');
});
}
});
Этот код начинается с проверки #box и проверки того, скрыт ли он в данный момент, с проверки его класса. Но он делает больше, используя вызов библиотеки wait(), добавляя класс hidden в конце анимации скольжения / затухания, который вы ожидаете найти, если он на самом деле скрыт - чего не мог сделать приведенный выше более простой пример. Это также позволяет отображать / скрывать элемент снова и снова, что было ошибкой в предыдущем примере, потому что скрытый класс никогда не восстанавливался.
Вы также можете увидеть изменения CSS и классов, вызываемые после .noTrnsn(), чтобы в целом подготовить сцену для анимации, включая выполнение измерений, таких как измерение конечной высоты #box без показа пользователю перед вызовом .resumeTrnsn() и анимация из этого полностью подготовленная стадия к своим целевым значениям CSS.
Старый ответ
https://jsfiddle.net/b9chris/hweyecu4/1/
Вы можете получить его переход по щелчку с помощью:
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, где его легко найти / разрешить другими кодировщиками, строящими поверх этого.
person
Chris Moschini
schedule
15.06.2016
z-index:0. - person DanMan schedule 31.10.2012visibility: hidden, если вы не хотите, чтобы программы чтения с экрана читали его (в то время как обычные браузеры этого не делают). Он только определяет видимость элемента (например,opacity: 0), и он по-прежнему доступен для выбора, кликабельности и того, чем он был раньше; это просто не видно. - person Forest Katsch schedule 20.05.2013pointer-eventsв IE 8,9,10, так что это не всегда нормально - person Steven Pribilinskiy schedule 20.02.2015visibility: collapseвместоvisibility: hiddenработает - person user6122771 schedule 16.01.2020