VueJS - Geçiş ve Animasyon
Bu bölümde, VueJS'de bulunan geçiş ve animasyon özelliklerini tartışacağız.
Geçiş
VueJS, DOM'a eklendiğinde / güncellendiğinde HTML öğelerine geçiş uygulamak için çeşitli yollar sağlar. VueJS, geçiş gerektiren öğenin etrafına sarılması gereken yerleşik bir geçiş bileşenine sahiptir.
Sözdizimi
<transition name = "nameoftransition">
<div></div>
</transition>Geçişin işleyişini anlamak için bir örnek ele alalım.
Misal
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true,
styleobj :{
fontSize:'30px',
color:'red'
}
},
methods : {
}
});
</script>
</body>
</html>Show değişkeninin değerini true olarak değiştirebileceğimiz clickme adlı düğme oluşturulmuştur ve bunun tersi de geçerlidir. Varp tagmetin öğesini yalnızca değişken doğruysa gösterir. Aşağıdaki kod parçasında gösterildiği gibi p etiketini geçiş öğesi ile sardık.
<transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>Geçişin adı fade. VueJS, geçiş için bazı standart sınıflar sağlar ve sınıfların önüne geçişin adı verilir.
Aşağıda, geçiş için bazı standart sınıflar verilmiştir -
v-enter- Bu sınıf, öğe güncellenmeden / eklenmeden önce çağrılır. Başlangıç durumu.
v-enter-active- Bu sınıf, geçiş aşamasına girmek için gecikme, süre ve hareket hızı eğrisini tanımlamak için kullanılır. Bu, tüm için aktif durumdur ve sınıf, tüm giriş aşaması boyunca kullanılabilir.
v-leave - Ayrılma geçişi tetiklendiğinde eklendi, kaldırıldı.
v-leave-active- Ayrılma aşamasında uygulanır. Geçiş tamamlandığında kaldırılır. Bu sınıf, çıkış aşamasında gecikme, süre ve hareket hızı eğrisini uygulamak için kullanılır.
Yukarıdaki sınıfların her birine geçişin adı önek olarak eklenecektir. Geçişin adını fade olarak verdik, dolayısıyla sınıfların adı.fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active.
Aşağıdaki kodda tanımlanmıştır.
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0
}
</style>.Fade_enter_active ve .fade_leave_active birlikte tanımlanır ve başlangıçta ve çıkış aşamasında bir geçiş uygular. Opaklık özelliği 2 saniyede 0 olarak değiştirilir.
Süre, .fade_enter_active ve .fade_leave_active'de tanımlanır. Son aşama .fade_enter, .fade_leave_to'da tanımlanır.
Tarayıcıdaki ekran aşağıdaki gibidir.
Düğmeye tıklandığında metin iki saniye içinde kaybolur.
İki saniye sonra metin tamamen kaybolacaktır.
Bir görüntünün olduğu ve düğmeye tıklandığında x ekseninde kaydırıldığı başka bir örneği ele alalım.
Misal
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.shiftx-enter-active, .shiftx-leave-active {
transition: all 2s ease-in-out;
}
.shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform : translateX(100px);
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "shiftx">
<p v-show = "show">
<img src = "images/img.jpg" style = "width:100px;height:100px;" />
</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true
},
methods : {
}
});
</script>
</body>
</html>Geçişin adı shiftx. Aşağıdaki kod parçası kullanılarak x eksenindeki görüntüyü 100 piksel kaydırmak için bir dönüştürme özelliği kullanılır.
<style>
.shiftx-enter-active, .shiftx-leave-active {
transition: all 2s ease-in-out;
}
.shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform : translateX(100px);
}
</style>Aşağıdaki çıktıdır.
Düğmeye tıklandığında, resim aşağıdaki ekran görüntüsünde gösterildiği gibi 100px sağa kayacaktır.
Animasyon
Animasyonlar, geçişte olduğu gibi uygulanır. Animasyonda, efektin gerçekleşmesi için bildirilmesi gereken sınıflar da vardır.
Animasyonun nasıl çalıştığını görmek için bir örnek ele alalım.
Misal
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.shiftx-enter-active {
animation: shift-in 2s;
}
.shiftx-leave-active {
animation: shift-in 2s reverse;
}
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "shiftx">
<p v-show = "show">
<img src = "images/img.jpg" style = "width:100px;height:100px;" />
</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true
},
methods : {
}
});
</script>
</body>
</html>Animasyonu uygulamak için, geçişle aynı sınıflar vardır. Yukarıdaki kodda, aşağıdaki kod parçasında gösterildiği gibi p etiketi içine alınmış bir resmimiz var.
<transition name = "shiftx">
<p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;" /></p>
</transition>Geçişin adı shiftx. Uygulanan sınıf aşağıdaki gibidir -
<style>
.shiftx-enter-active {
animation: shift-in 2s;
}
.shiftx-leave-active {
animation: shift-in 2s reverse;
}
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}
</style>Sınıfın önüne geçiş adı, yani shiftx-enter-active ve .shiftx-allow-active gelir. Animasyon,% 0 ile% 100 arasındaki anahtar karelerle tanımlanır. Aşağıdaki kod parçasında gösterildiği gibi, anahtar karelerin her birinde tanımlanan bir dönüşüm vardır.
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}Aşağıdaki çıktıdır.
Düğmeye tıklandığında 0'dan 360 dereceye döner ve kaybolur.
Özel Geçiş Sınıfları
VueJS, geçiş öğesine öznitelikler olarak eklenebilen özel sınıfların bir listesini sağlar.
- enter-class
- enter-active-class
- leave-class
- leave-active-class
Animate.css gibi harici bir CSS kitaplığı kullanmak istediğimizde temelde özel sınıflar devreye girer.
Misal
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "animate" style = "text-align:center">
<button @click = "show = !show"><span style = "font-size:25px;">Animate</span></button>
<transition
name = "custom-classes-transition"
enter-active-class = "animated swing"
leave-active-class = "animated bounceIn">
<p v-if = "show"><span style = "font-size:25px;">Example</span></p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#animate',
data: {
show: true
}
});
</script>
</body>
</html>Çıktı
Çıktı
Çıktı
Yukarıdaki kodda uygulanan iki animasyon vardır. Bir enter-aktif-sınıf = "hareketli salıncak" ve başka bir aktif bırak-aktif-sınıf = "hareketli sıçramaIn". Üçüncü parti kütüphaneden uygulanacak animasyon için özel animasyon sınıfları kullanıyoruz.
Açık Geçiş Süresi
VueJS kullanarak element üzerine geçiş ve animasyon uygulayabiliriz. Vue, animasyonun veya geçişin yapılıp yapılmadığını algılamak için geçiş sonu ve animasyon sonu olayını bekler.
Bazen geçiş gecikmeye neden olabilir. Bu gibi durumlarda süreyi aşağıdaki şekilde açıkça uygulayabiliriz.
<transition :duration = "1000"></transition>
<transition :duration = "{ enter: 500, leave: 800 }">...</transition>Süre özelliğini, yukarıda gösterildiği gibi geçiş öğesinde a: ile kullanabiliriz. Giriş ve çıkış süresinin ayrı ayrı belirtilmesi gerektiğinde yukarıdaki kod parçasında gösterildiği gibi yapılabilir.
JavaScript Kancaları
Geçiş sınıfları, JavaScript olaylarını kullanan yöntemler olarak adlandırılabilir. Daha iyi anlamak için bir örnek ele alalım.
Misal
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id = "example-4">
<button @click = "show = !show">
<span style = "font-size:25px;">Toggle</span>
</button>
<transition v-on:before-enter = "beforeEnter"
v-on:enter = "enter"
v-on:leave = "leave"
v-bind:css = "false">
<p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
Velocity(el, { fontSize: '10px' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
});
</script>
</body>
</html>Çıktı
Yukarıdaki örnekte, geçiş elemanı üzerinde js yöntemlerini kullanarak animasyon gerçekleştiriyoruz.
Geçiş yöntemleri aşağıdaki şekilde uygulanır -
<transition v-on:before-enter = "beforeEnter"
v-on:enter = "enter"
v-on:leave = "leave"
v-bind:css = "false">
<p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>Eklenen bir önek var v-onve yöntemin çağrıldığı olayın adı. Yöntemler, Vue örneğinde aşağıdaki gibi tanımlanır -
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
Velocity(el, { fontSize: '10px' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}Bu yöntemlerin her birinde gerekli geçiş uygulanır. Düğmeye tıklandığında ve ayrıca animasyon tamamlandığında uygulanan bir opaklık animasyonu vardır. Animasyon için üçüncü taraf kitaplığı kullanılır.
Geçiş v-bind: css = "false" üzerine eklenen bir özellik vardır ve bu, Vue'nun bunun bir JavaScript geçişi olduğunu anlaması için yapılır.
İlk Görüntülemede Geçiş
Başlangıçta animasyon eklemek için, geçiş elemanına 'görünme' özelliğini eklememiz gerekir.
Daha iyi anlamak için bir örneğe bakalım.
Misal
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "animate" style = "text-align:center">
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated bounceIn">
<h1>BounceIn - Animation Example</h1>
</transition>
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated swing">
<h1>Swing - Animation Example</h1>
</transition>
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated rubberBand">
<h1>RubberBand - Animation Example</h1>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#animate',
data: {
show: true
}
});
</script>
</body>
</html>Yukarıdaki örnekte animate.css kütüphanesinden üç farklı animasyon kullandık. Geçiş elemanına görünme ekledik.
Yukarıdaki kod çalıştırıldığında, aşağıdaki çıktı tarayıcıda olacaktır.
Bileşenler Üzerinde Animasyon
Aşağıdaki kodu kullanarak bileşenler için geçişi sarmalayabiliriz. Burada dinamik bileşen kullandık.
Misal
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]" rel = "stylesheet" type = "text/css">
</head>
<body>
<div id = "databinding" style = "text-align:center;">
<transition appear
appear-class = "custom-appear-class"
appear-active-class = "animated wobble">
<component v-bind:is = "view"></component>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-
size:25;color:red;">Animation on Components</span></div>'
}
}
});
</script>
</body>
</html>Çıktı
