Możesz sprawić, by działało to w naturalny sposób, jak się spodziewałeś - używając wyświetlacza - ale musisz dusić przeglądarkę, aby uruchomić, używając Javascript lub jak inni sugerowali wymyślną sztuczkę z jednym tagiem wewnątrz drugiego. Nie dbam o wewnętrzny tag, ponieważ dodatkowo komplikuje CSS i wymiary, więc oto rozwiązanie JavaScript:
https://jsfiddle.net/b9chris/hweyecu4/17/
Począwszy od pola takiego jak:
<div id="box" class="hidden">Lorem</div>
Ukryte pudełko.
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
Użyjemy sztuczki znalezionej w pokrewnym kw / d, sprawdzając offsetHeight, aby natychmiast dusić przeglądarkę:
https://stackoverflow.com/a/16575811/176877
Po pierwsze, biblioteka formalizująca powyższą sztuczkę:
$.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;
});
};
Następnie użyjemy go, aby odsłonić pudełko i wprowadzić go:
$('#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 });
});
To powoduje zanikanie pola. Więc .noTrnsn()wyłącza przejściami, a następnie usuwamy hiddenklasy, który trzepie displayz nonejego domyślnie block. Następnie ustawiamy krycie na 0, aby przygotować się do przejścia. Teraz, gdy ustawiliśmy scenę, ponownie włączamy przejścia za pomocą .resumeTrnsn(). Na koniec rozpocznij przejście, ustawiając krycie na 1.
Bez biblioteki zarówno zmiana sposobu wyświetlania, jak i zmiana krycia przyniosłaby nam niepożądane efekty. Gdybyśmy po prostu usunęli wywołania biblioteki, nie uzyskalibyśmy żadnych przejść.
Zauważ, że powyższe nie ustawia ponownie wyświetlania na none na końcu animacji zanikania. Możemy jednak stać się bardziej wyszukani. Zróbmy to z takim, który zanika i rośnie na wysokości od 0.
Fantazyjny!
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
Teraz zmieniamy wysokość i krycie. Należy pamiętać, że nie jesteśmy ustawiania wysokości, co oznacza, że jest to domyślne auto. Konwencjonalnie nie można tego zmienić - przejście z auto na wartość piksela (np. 0) nie spowoduje przejścia. Omówimy to przy użyciu biblioteki i jeszcze jednej metody bibliotecznej:
$.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();
});
};
Jest to wygodna metoda, która pozwala nam uczestniczyć w istniejącej kolejce efektów / animacji jQuery, bez konieczności korzystania z jakichkolwiek ram animacji, które są teraz wykluczone w jQuery 3.x. Nie zamierzam wyjaśniać, jak działa jQuery, ale wystarczy powiedzieć, że .queue()i .stop()hydraulika, którą zapewnia jQuery, pomaga nam uniknąć sytuacji, w której nasze animacje będą na siebie naciskać.
Animujmy efekt przesuwania w dół.
$('#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');
});
}
});
Kod zaczyna się od sprawdzenia, #boxczy jest obecnie ukryty, od sprawdzenia jego klasy. Ale osiąga więcej przy użyciu wait()wywołania biblioteki, dodając hiddenklasę na końcu animacji wysuwania / zanikania, której można się spodziewać, jeśli jest ona faktycznie ukryta - coś, czego powyższy prostszy przykład nie mógł zrobić. Zdarza się to również włączać wyświetlanie / ukrywanie elementu w kółko, co było błędem w poprzednim przykładzie, ponieważ ukryta klasa nigdy nie została przywrócona.
Możesz także zobaczyć zmiany CSS i klas wywoływane po tym, .noTrnsn()aby ogólnie ustawić scenę dla animacji, w tym wykonywanie pomiarów, takich jak pomiar ostatecznej wysokości #boxbez pokazywania tego użytkownikowi, przed wywołaniem.resumeTrnsn() i animowanie go z tego pełnego zestawu osiągnąć swój cel wartości CSS.
Stara odpowiedź
https://jsfiddle.net/b9chris/hweyecu4/1/
Możesz przejść z kliknięciem za pomocą:
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 jest tym, co zgadniesz:
.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);
}
Kluczem jest dławienie właściwości wyświetlania. Usuwając ukrytą klasę, a następnie czekając 50 ms, a następnie rozpoczynając przejście przez klasę dodaną, wyświetlamy ją, a następnie rozwijamy tak, jak chcieliśmy, zamiast po prostu wślizgnąć się na ekran bez animacji. Podobnie dzieje się w drugą stronę, z tą różnicą, że czekamy na zakończenie animacji, zanim zastosujemy ukryte.
Uwaga: Nadużywam .animate(maxWidth)tutaj, aby uniknąć setTimeoutwarunków wyścigu. setTimeoutszybko wprowadza ukryte błędy, gdy ty lub ktoś inny nie rozumie tego kodu. .animate()można łatwo zabić .stop(). Po prostu używam go do umieszczenia opóźnienia 50 ms lub 2000 ms w standardowej kolejce fx, gdzie łatwo jest znaleźć / rozwiązać przez inne kodery budujące na tym.