Vue学習小札——3.0 css遷移/アニメーション
12302 ワード
"fade">
"show">hello world
エレメントがtransitionに包まれると、Vueはエレメントのcssスタイルを自動的に解析し、アニメーションの流れを構築します.
表示:
アニメーションが実行される瞬間、fade-enterとfade-enter-activeの2つのclassが内部divに自動的に追加されます.アニメーションの最初のフレームの実行が終了すると、transitionというラベルは、vueがアニメーション効果であることを知っています.vueはアニメーションが2フレーム目まで実行されると、vueは前のfade-enterを削除し、fade-enter-toを追加します.アニメーションは終了するまで実行され、vueはfade-enter-activeとfade-enter-toの2つのclassを削除します.
非表示:
vueは自動的に非表示のアニメーションフローを構築し、非表示の最初の瞬間にvueは自動的にfade-leaveとfade-leave-activeの2つのクラスを生成します.2フレーム目のときにfade-leaveを削除し、fade-leave-toを追加します.最後のフレームでは、fade-leave-activeとfade-leave-toを削除します.
すべての接頭辞がfadeで始まるのはname=「fade」のためで、fadeがなければデフォルトの先頭は「v-」です.
@keyframes bounce-in {
0% {
transfrom: scale(0);
}
50% {
transfrom: scale(1.5);
}
100% {
transfrom: scale(1);
}
}
.fade-enter-active {
transform-origin: left center;
animation: bounce-in 1s;
}
.fade-leave-active {
transform-origin: left center;
animation: bounce-in 1s reverse;
}
VueにはAnimateを用いる.cssライブラリ
1.カスタムclass形式のネーミングを使用してAnimateを使用する必要があります.css
2.classクラスにはanimatedという具体的なクラスが含まれている必要があります.そして、入場効果と出場効果によって、クラス名を2番目の位置に書く必要があります.
"fade"
enter-active-class="animated swing"
leave-active-class="animated shake"
>
"show">hello world
"fade"
appear
enter-active-class="animated swing"
leave-active-class="animated shake"
appear-active-class="animated swing"
>
"show">hello world
appear-active-classのようにアニメーションのclassをカスタマイズするには、クラス名にappearプロパティをもう1つ書くことを覚えておいてください.上記の例では、動画の最初の表示にもanimated swingの効果があるという意味です.
vueでの遷移とアニメーションの同時使用
実はcssが提供するアニメーションの原理は@keyframesというcss 3のアニメーション効果です.
トランジション
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 3s;
}
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transition: opacity 3s;
}
"fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
"show">hello world
我々が定義したfade-enter-activeとfade-leave-activeの遷移時間は3 sであるが、Animate.cssソースのanimatedアニメーション(@keyframes)は1 sです.このときtypeを設定する
"fade"
type="transition"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
"show">hello world
ここにはkeyframeのアニメーションとtransitionのアニメーションがあり、アニメーションの長さはtypeに設定されたアニメーションのタイプを基準としています.
アニメーションの再生時間をカスタマイズすることもできます
:duration="10000"
:duration="{enter: 5000,leave:10000}"
VueのJsアニメーションとVelocity.jsの結合
a.アニメーション表示フック
@before-enter = "handleBeforeEnter"
handleBeforeEnter: function(el) {
//el :transition div
el.style.color = "red";
},
@enter = "handleEnter"
handleEnter: function(el,done){
//done ， ， done
setTimeout(()=>{
el.style.color = "green";
}, 2000);
setTimeout(()=>{
done();
},4000);
},
@after-enter = "handleAfterEnter"
handleAfterEnter: function(el) {
el.style.color = "black";
},
}b.動画消去フック
@before-leave
@leave
@after-leave
c.Velocity.js
handleBeforeEnter: function(el) {
el.style.opacity = 0;
},
handleEnter: function(el,done){
Velocity(el,
{opacity: 1},
{duration:1000,
complete:done});
},
handleAfterEnter: function(el) {
alert(" ");
},
Vue内の複数の要素またはコンポーネントの遷移
a.複数の要素の遷移:
Vueは、アニメーション(2つの要素を切り替えるとき)でdomをできるだけ多重化し、多重化メカニズムを解消するために、要素ごとに異なるkey値を与えます.
Vueはtransitionでmode構成パラメータも提供し、複数の要素の切り替え時の効果を設定します.
"fade" mode="in-out">
"show" key="hello">hello world
"bye">bye world
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 1s;
}
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transition: opacity 1s;
}
b.複数のコンポーネントの遷移効果:(動的コンポーネント)
"app">
"fade" mode="out-in">
"type">
Vue.component(<span class="hljs-string">'child'</span>,{
template: <span class="hljs-string">'<div>child</div>'</span>
});
Vue.component(<span class="hljs-string">'child-one'</span>,{
template: <span class="hljs-string">'<div>child-one</div>'</span>
});
var vm = new Vue({
el: <span class="hljs-string">"#app"</span>,
data: {
<span class="hljs-built_in">type</span>: <span class="hljs-string">'child'</span>
},
methods: {
handleClick: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
this.type = (this.type===<span class="hljs-string">'child'</span>) ? <span class="hljs-string">'child-one'</span> : <span class="hljs-string">'child'</span>;
}
}
});
Vueのリスト遷移transition-group
"app">
"(item,index) of list" key="item.id">
{{item.title}}----{{item.id}}
var count = 0;
var vm = new Vue({
el: <span class="hljs-string">"#app"</span>,
data: {
list: []
},
methods: {
handleClick: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
this.list.push({
id: count++ ,
title: <span class="hljs-string">'hello wrold'</span>
});
}
}
});
Vueのアニメーションパッケージ
"app">
"show">
hello world
"show">
bye world
Vue.component(<span class="hljs-string">'fade'</span>,{
props:[<span class="hljs-string">'show'</span>],
template: `
<transition
@before-enter=<span class="hljs-string">"handleBeforeEnter"</span>
@enter=<span class="hljs-string">"handleEnter"</span>
@after-enter=<span class="hljs-string">"handleAfterEnter"</span>>
<slot v-if=<span class="hljs-string">"show"</span>></slot>
</transition>
`,
methods: {
handleBeforeEnter: <span class="hljs-keyword">function</span>(el) {
el.style.color = <span class="hljs-string">'red'</span>;
},
handleEnter: <span class="hljs-keyword">function</span>(el,<span class="hljs-keyword">done</span>) {
<span class="hljs-built_in">set</span>Timeout(()=>{
el.style.color = <span class="hljs-string">'blue'</span>;
}, 2000);
<span class="hljs-built_in">set</span>Timeout(()=>{
<span class="hljs-keyword">done</span>();
}, 5000);
},
handleAfterEnter: <span class="hljs-keyword">function</span>(el) {
el.style.color = <span class="hljs-string">'black'</span>;
}
}
});
var vm = new Vue({
el: <span class="hljs-string">"#app"</span>,
data: {
show:<span class="hljs-literal">true</span>
},
methods: {
handleClick: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
this.show = !this.show;
}
}
});