Wajah menggunakan javascript durasi transisi

Properti transition-duration menentukan berapa detik (detik) atau milidetik (md) yang diperlukan untuk menyelesaikan efek transisi

nilai default. 0s Diwariskan. notAnimatable. bukan. Baca tentang animatableVersion. Sintaks JavaScript CSS3. obyek. gaya. transisiDurasi="1s" Cobalah

---

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti

Angka diikuti oleh -webkit-, -moz- atau -o- tentukan versi pertama yang berfungsi dengan awalan

Propertitransisi-durasi26. 0
4. 0 -webkit-10. 016. 0
4. 0 -moz-6. 1
3. 1 -webkit-12. 1
10. 5 -atau-

---

Sintaks CSS

durasi transisi. waktu. awal. warisan;

Nilai properti

Nilai Deskripsi waktu Menentukan berapa detik atau milidetik yang diperlukan untuk menyelesaikan efek transisi. Nilai default adalah 0s, artinya tidak akan ada inisial yang efektif Atur properti ini ke nilai defaultnya. Baca tentang initialinheritInherits properti ini dari elemen induknya. Baca tentang warisan

Di masa lalu, menambahkan transisi halaman di halaman web merupakan proses yang sederhana. Ketika Anda mengklik link tersebut akan mengarahkan Anda ke halaman berikutnya sebagai browser load halaman berikutnya. Web telah merasa ketinggalan jaman jika Anda berpikir tentang ada banyak ruang untuk memperbaikinya. Tidak lebih bagus menambahkan beberapa transisi halus untuk menciptakan pengalaman pengguna yang lebih baik dalam meload halaman berikutnya?

Hal baik yang bisa dilakukan. Ada banyak aplikasi rumit dan plugin yang menawarkan jenis efek yang sama dan beberapa mungkin berpikir sulit untuk mendapatkannya. Untungnya hal itu tidak dengan cara ini

Kita sudah bermain-main dengan jQery dalam mencari tahu cara untuk mengganti reload dari halaman web dengan animasi yang mengagumkan yang pasti akan merubah pikiran pengguna tanpa menggunakan plugin dan kini kita akan berbagi cara dalam pembuatannya

Membuat Markup

Struktur HTML hanya akan terdiri dari dua div untuk dua halaman yang berisi id main-page dan next-page

Yuk kita tambahkan konten dalam div. Kita akan memberikan setiap link halaman untuk menavigasi dan menghubungkan mereka satu sama lain melalui class mainlink dan nextlink

________satu_______

Menambah Gaya

Sekarang mari kita menambahkan beberapa gaya umum di markup. Kita akan mengatur elemen seluruh tubuh untuk 100% dan mengatur beberapa properti font untuk tag h1 kita

body {
width: 100%;
}
h1 {
    font-family: 'Raleway';
    font-weight: bold;
    text-align: center;
    font-size: 50px;
    color: #fff;
    margin-top: 120px;
}

Langkah selanjutnya mari kita buat style main-page dan next-page. Keduanya berbagi sifat bawaan yang sama kecuali warna background. Kita mengatur posisi untuk mutlak dan menyembunyikan kedua elemen melalui tampilan. tidak ada

#main-page {
    height: 25px;
    width: 375px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    background-color: #27ae60;
    display: none;
}
#next-page {
    height: 25px;
    width: 375px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    background-color: #e74c3c;
    display: none;
}
.maincontent, .nextcontent {
    padding-top: 40px;
    display: none;
}

Kita juga menambahkan style dasar untuk tombol agar membuat mereka lebih menarik. Kami menggunakan border untuk membuat bentuk kotak halus pada tombol dan menyelaraskan ke tengah

a.back{
    font-family: 'Lato';
    font-size: 20px;
    color: #dfdfdf;
    text-decoration: none;
    text-align: center;
    width: 20%;
    margin: 25px auto 30px auto;
    display: block;
}
a.mainlink, a.nextlink {
    font-family: 'Lato';
    color: #fff;
    border: 3px solid #fff;
    padding: 15px 10px;
    display: block;
    text-align: center;
    margin: 25px auto;
    width: 13%;
    text-decoration: none;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
 
}
a.mainlink:hover, a.nextlink:hover{
    background: #fff;
    color: #575757;
}

_

Menghidupkan dengan jQuery

Untuk memuat halaman jQuery, kita akan mulai dengan fungsi rasional yang akan melakukan animasi kustom dari satu set properti CSS melalui properti, durasi, kurangi nilai lengkap

$(document).ready(function() {
 
    $.fn.animateRotate = function(angle, duration, easing, complete) {
      var args = $.speed(duration, easing, complete);
      var step = args.step;
      return this.each(function(i, e) {
        args.complete = $.proxy(args.complete, e);
        args.step = function(now) {
          $.style(e, 'transform', 'rotate(' + now + 'deg)');
          if (step) return step.apply(e, arguments);
        };
 
        $({deg: 0}).animate({deg: angle}, args);
      });
    };

Selanjutnya, kita akan mengatur ulang semua properti dari halaman utama dan fadenya. Ketika mainlink dan nextlink diklik akan menjalankan fungsi dia

Fungsi pertama akan memudarkan teks di halaman utama dan membuat objek menyusut. Setelah eksekusi objek berputar menggunakan fungsi untuk rotasi rotasi

$("#main-page").css("background-color", "#e74c3c");
$("#main-page").css("height", "100vh");
$("#main-page").css("width", "100%");
$("#main-page").fadeIn();
$(".maincontent").fadeIn();
 
$(".mainlink").on("click", function() {
    $(".maincontent").fadeOut();
    $("#main-page").animate({
        width: "25px",
        height: "375px"
    }, function() {
        $(this).animateRotate(90);
    });
     
    setTimeout(function() {
        $("#main-page").fadeOut();       
    }, 1500);
     
    setTimeout(function() {
        $("#next-page").animateRotate(0, 0);
        $("#next-page").css("height", "25px");
        $("#next-page").css("width", "375px");
        $("#next-page").fadeIn();
        $("#next-page").animate({
            backgroundColor: "#27ae60"
        }, function() {
            $(this).animate({
                height: "100vh"
            }, function() {
                $(this).animate({
                    width: "100%"
                }, function() {
                    $(".nextcontent").fadeIn(300);
                });
            });
        });
    }, 800);
});

_

Setelah semua langkah ini, fungsi fade out objek yang diklik untuk menunjukan objek baru dan kemudian mengubah warna background dari objek yang cocok dengan objek baru