Geçişler ve animasyonlar, kullanıcı deneyiminde önemli bir rol oynar. Web sayfasındaki öğeler arasına ince animasyonlar ve geçişler ekleyerek kullanıcı deneyimini geliştirebilirsiniz. Web sitesi çok daha pürüzsüz, daha ilgi çekici ve genel olarak baştan sona daha iyi görünecektir.

Bu öğretici, Vue.js'de geçişlerin ve animasyonların nasıl uygulanacağını gösterir. kullanarak hem basit geçişler hem de karmaşık animasyonlar oluşturmayı öğreneceksiniz. geçiş bileşen ve CSS anahtar kareleri.

Vue.js Geçiş Bileşeni

Vue.js'de yerleşik bir geçiş uygulamanızda animasyonlar oluşturmanıza izin veren bileşen. Bu bileşen, canlandırmak istediğimiz hedef öğeyi sarar.

Burada geçiş bileşeni birinci düzey başlığı tamamlar:

 Merhaba </h1>
</transition>

ile bir elemanı sardığınızda geçiş bileşen, geçiş sınıflarını sardığı öğeye uygulayacaktır. Toplamda altı geçiş sınıfı vardır. Üçü, sayfaya girerken öğenin animasyonunu kontrol eder. Diğer üçü, sayfadan çıkarken öğenin animasyonunu kontrol eder.

Bu makalede kullanılan kod bu makalede mevcuttur. GitHub deposu ve MIT lisansı altında ücretsiz olarak kullanabilirsiniz.

Öğeler Sayfaya Girdiğinde Geçiş Sınıflarını Uygulama

DOM'a eleman girme işlemi sırasında, geçiş bileşen sınıfları uygular giriş, giriş, Ve giriş aktif ona Bu sınıflar, öğenin sayfaya nasıl hareket edeceğini veya sayfaya nasıl geçeceğini kontrol etmenizi sağlar.

• giriş: Bir tarayıcıya girmeden önce öğeye uygulanır. Öğenin ilk CSS durumunu ayarlamak için bu sınıfı kullanırsınız.
• giriş: Tarayıcıya girerken öğeye uygulanır. Öğenin son CSS durumunu ayarlamak için bu sınıfı kullanırsınız.
• giriş aktif: Öğe bir durumdan diğerine geçerken uygulanır. Geçişin ne kadar süreceğini burada belirlersiniz.

Bir örnek görelim:

<geçiş>
 <h1> Merhabah1>
geçiş>
.enter-from {
opaklık: 0;
}
.enter-to {
opaklık: 1;
}
.enter-aktif {
geçiş: opaklık 2Skolaylaştırmak;
}

Bu kodla, birinci düzey başlığın görünmezden (opaklık: 0) tamamen görünür (opaklık: 1). Bu geçiş, öğe DOM'a girdiğinde gerçekleşir. Geçiş olmasaydı, sayfa yüklenir yüklenmez metin tarayıcıda hemen görünürdü.

Öğeler Sayfadan Ayrıldığında Geçiş Sınıflarını Uygulama

bu geçiş bileşen, öğe DOM'den ayrılırken uygulamanız gereken diğer üç geçiş sınıfını destekler. Onların isimleri dan ayrılmak, bırakmak, Ve etkin olmayan. Bu sınıflar, öğenin sayfadan nasıl hareket edeceğini veya geçiş yapacağını kontrol eder.

Tahmin edebileceğiniz gibi, bu sınıflar şuna benzer: girmek- Daha önce tartıştığımız sınıflar. Ancak bu sınıflar, yalnızca öğe DOM'dan çıkarılmak üzereyken etkinleştirilir. Bağlama ve çıkarma, DOM'un önemli kavramlarıdır. Bir geliştirici olarak, bir temel DOM anlayışı ve diğer ilgili kavramlar.

Bir örnek görelim:

<geçiş>
 <h1> Merhabah1>
geçiş>
.dan ayrılmak {
opaklık: 0;
}
.bırakma {
opaklık: 1;
}
.bırak-etkin {
geçiş: opaklık 2Skolaylaştırmak;
}

Bu durumda, birinci düzey başlığın görünür durumdan () yavaşça geçiş yapması iki saniye sürer.opaklık: 1) görünmez (opaklık: 0). Bu geçiş, öğe DOM'dan ayrıldığında gerçekleşir. Geçiş olmasaydı, metin tarayıcıdan anında kaybolurdu.

Geçiş Adlarını Kullanma

Ayrıca ekleyebilirsiniz isim geçiş bileşeninize öznitelik. Bunu yaptığınızda, Vue adı geçiş sınıflarınıza ekler. Bu, sayfanızda her biri benzersiz geçiş sınıflarına ve CSS özelliklerine sahip birden çok geçişe sahip olabileceğiniz anlamına gelir.

Örneğin, adı ayarlarsanız solmak geçiş bileşeninizde, tüm geçiş sınıflarının ön eki solmak:

<geçişisim ="solmak">
 <h1> Merhabah1>
geçiş>
.fade-enter-from {
opaklık: 1;
}
.fade-terk-den {
opaklık: 1;
}
// diğer "girmek" Ve "ayrılmak" sınıflarilethesolmakgibiönek

Geçiş Bileşenini Kullanarak Geçişler Oluşturma

Vue.js'deki geçişi göstermek için bir H1 içinde geçiş bileşen. Altında, bir düğme oluşturacaksınız. Bu butona tıklandığında değişkeni değiştirir. başlığı göster arasında YANLIŞ Ve doğru.

İşte kod:

Ardından, senaryo bölüm. Bu bölüm şunları içerir: kurmak başlattığınız yöntem başlığı göster ile değişken YANLIŞ.