Anda bisa membuatnya berfungsi seperti yang Anda harapkan - menggunakan tampilan - tetapi Anda harus mencekik peramban agar berfungsi, menggunakan Javascript atau yang lain menyarankan trik mewah dengan satu tag di dalam tag lain. Saya tidak peduli dengan tag batin karena semakin memperumit CSS dan dimensi, jadi inilah solusi Javascript:
https://jsfiddle.net/b9chris/hweyecu4/17/
Mulai dengan kotak seperti:
<div id="box" class="hidden">Lorem</div>
Kotak tersembunyi.
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
Kita akan menggunakan trik yang ditemukan di q / a terkait, memeriksa offsetHeight untuk mempercepat browser secara instan:
https://stackoverflow.com/a/16575811/176877
Pertama, perpustakaan memformalkan trik di atas:
$.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;
});
};
Selanjutnya, kita akan menggunakannya untuk mengungkapkan kotak, dan memudar di:
$('#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 });
});
Ini memudar kotak masuk dan keluar. Jadi, .noTrnsn()matikan transisi, lalu kita hapus hiddenkelas, yang beralih displaydari noneke standarnya block,. Kami kemudian mengatur opacity ke 0 untuk bersiap-siap untuk memudar. Sekarang setelah kami mengatur panggung, kami mengaktifkan kembali transisi, dengan.resumeTrnsn() . Dan akhirnya, mulailah transisi dengan mengatur opacity ke 1.
Tanpa pustaka, baik perubahan pada tampilan maupun perubahan pada opacity akan memberi kita hasil yang tidak diinginkan. Jika kami hanya menghapus panggilan perpustakaan, kami tidak akan mendapatkan transisi sama sekali.
Perhatikan bahwa di atas tidak mengatur tampilan menjadi tidak ada lagi di akhir animasi fadeout. Kita bisa jadi pelamun. Mari kita lakukan dengan yang memudar dan tumbuh tinggi dari 0.
Mewah!
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
Kami sekarang mentransisikan tinggi dan opacity. Perhatikan bahwa kita tidak menetapkan tinggi, yang berarti itu adalah default auto,. Secara konvensional ini tidak dapat ditransisikan - pindah dari otomatis ke nilai piksel (seperti 0) tidak akan membuat Anda mengalami transisi. Kita akan mengatasinya dengan perpustakaan, dan satu lagi metode perpustakaan:
$.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();
});
};
Ini adalah metode kenyamanan yang memungkinkan kita berpartisipasi dalam antrian fx / animasi jQuery yang ada, tanpa memerlukan kerangka animasi apa pun yang sekarang dikecualikan di jQuery 3.x. Saya tidak akan menjelaskan cara kerja jQuery, tetapi cukup untuk mengatakan, .queue()dan .stop()menyederhanakan yang disediakan jQuery membantu kita mencegah animasi kita saling menginjak.
Mari kita menghidupkan efek slide ke bawah.
$('#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');
});
}
});
Kode ini dimulai dengan memeriksa #boxdan apakah saat ini disembunyikan, dengan memeriksa kelasnya. Tapi itu lebih berhasil menggunakan wait()panggilan perpustakaan, dengan menambahkan hiddenkelas pada akhir animasi slideout / fade, yang Anda harapkan untuk menemukan jika itu sebenarnya tersembunyi - sesuatu yang contoh sederhana di atas tidak bisa lakukan. Ini terjadi juga untuk mengaktifkan tampilan / menyembunyikan elemen berulang-ulang, yang merupakan bug pada contoh sebelumnya, karena kelas tersembunyi tidak pernah dipulihkan.
Anda juga dapat melihat perubahan CSS dan kelas yang dipanggil .noTrnsn()untuk secara umum mengatur panggung untuk animasi, termasuk melakukan pengukuran, seperti mengukur apa yang akan menjadi ketinggian akhir #boxtanpa menunjukkannya kepada pengguna, sebelum memanggil.resumeTrnsn() , dan menganimasinya dari set lengkap itu. panggung ke nilai-nilai CSS tujuannya.
Jawaban Lama
https://jsfiddle.net/b9chris/hweyecu4/1/
Anda dapat memilikinya transisi pada klik dengan:
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 adalah apa yang Anda duga:
.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);
}
Kuncinya adalah membatasi properti tampilan. Dengan menghapus kelas tersembunyi dan kemudian menunggu 50 ms, kemudian memulai transisi melalui kelas yang ditambahkan, kita membuatnya muncul dan kemudian berkembang seperti yang kita inginkan, alih-alih hanya melompat ke layar tanpa animasi. Serupa terjadi sebaliknya, kecuali kami menunggu sampai animasi selesai sebelum menerapkan tersembunyi.
Catatan: Saya menyalahgunakan di .animate(maxWidth)sini untuk menghindari setTimeoutkondisi balapan. setTimeoutcepat untuk memperkenalkan bug tersembunyi ketika Anda atau orang lain mengambil kode yang tidak menyadarinya. .animate()dapat dengan mudah dibunuh .stop(). Saya hanya menggunakannya untuk menempatkan penundaan 50 ms atau 2000 ms pada antrian fx standar di mana mudah ditemukan / diselesaikan oleh pembuat kode lain di atas ini.