Вы можете заставить это работать так, как вы ожидали - используя отображение, - но вам нужно настроить браузер, чтобы заставить его работать, используя либо 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);
}
Ключ регулирует свойство display.Удаляя скрытый класс, затем ожидая 50 мс, , затем , начиная переход с помощью добавленного класса, мы получаем его, чтобы он появлялся, а затем расширялся, как мы хотели, вместо того, чтобы просто показывать на экране без какой-либо анимации.Подобное происходит и в другом направлении, за исключением того, что мы ждем, пока анимация не закончится, прежде чем применять скрытое.
Примечание: я злоупотребляю .animate(maxWidth) здесь, чтобы избежать setTimeout условий гонки.setTimeout быстро вносит скрытые ошибки, когда вы или кто-то другой обнаруживает код, не подозревая об этом..animate() можно легко убить с помощью .stop().Я просто использую его, чтобы поместить задержку в 50 мс или 2000 мс в стандартную очередь fx, где ее легко найти / решить с помощью других кодеров, работающих над этим.