Ви можете змусити це працювати природним способом, який ви очікували - використовуючи дисплей, але вам потрібно придушити браузер, щоб змусити його працювати, використовуючи або Javascript, або як інші запропонували химерний трюк з одним тегом всередині іншого. Мене не хвилює внутрішній тег, оскільки він ще більше ускладнює CSS та параметри, тому ось рішення Javascript:
https://jsfiddle.net/b9chris/hweyecu4/17/
Починаючи з поля, наприклад:
<div id="box" class="hidden">Lorem</div>
Прихований ящик.
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
Ми будемо використовувати трюк, знайдений у відповідному питанні, перевіряючи зсув Висота, щоб миттєво заглушити браузер:
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.
Без бібліотеки і зміна відображення, і зміна непрозорості отримали б нам небажані результати. Якщо ми просто видалили дзвінки з бібліотеки, ми взагалі не отримали б переходів.
Зауважте, що вищезазначене не встановлює показ знову нічим в кінці анімації вимкнення. Але ми можемо отримати більш фантазійні. Давайте зробимо це з тим, що в’яне і зростає у висоту від 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, де її легко знайти / вирішити іншими кодерами, що будують поверх цього.