Вы можете заставить это работать так, как вы ожидали - используя отображение, - но вам нужно настроить браузер, чтобы заставить его работать, используя либо Javascript, либо, как другие предлагали причудливый трюк с одним тегом внутри другого. Мне плевать на внутренний тег, так как он еще больше усложняет CSS и размеры, поэтому вот решение Javascript:
https://jsfiddle.net/b9chris/hweyecu4/17/
Начиная с коробки вроде:
<div id="box" class="hidden">Lorem</div>
Скрытая коробка.
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
Мы собираемся использовать трюк, найденный в соответствующем вопросе, проверяя 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.
Без библиотеки и отображение, и изменение непрозрачности получили бы нежелательные результаты. Если бы мы просто удалили вызовы библиотеки, мы бы вообще не получили переходов.
Обратите внимание, что вышеприведенное не устанавливает display снова в 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();
});
};
Это удобный метод, который позволяет нам участвовать в существующей очереди jQuery fx / animation, не требуя какой-либо инфраструктуры анимации, которая теперь исключена в 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, где легко найти / решить другие кодеры, основанные на этом.