ホームページ > 記事 > ウェブフロントエンド > Vue3 で要素とコンポーネント間でアニメーションを切り替える方法
Vue3 で要素とコンポーネント間でアニメーションを切り替える方法
- PHPz転載
- 2023-05-14 14:16:11817ブラウズ
dom# を参照します。たとえば、1 つの div が消え、別の div が表示されます。消える場合はフェードアウト効果に対応し、表示される場合はフェードイン効果に対応します。この例では、では、2 つの div を使用し、1 つは hello world を表示し、もう 1 つは bye world を表示し、ボタンを使用してアニメーションの切り替えを制御します。 <pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素切换动画的实现</title>
<style>
.v-enter-from{
opacity: 0;
}
.v-enter-active{
transition: opacity 1s ease-in;
}
.v-enter-to{
opacity: 1;
}
.v-leave-from{
opacity: 1;
}
.v-leave-active{
transition:opacity 1s ease-in
}
.v-leave-to{
opacity: 0;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
show:false
}
},
methods: {
handleClick(){
this.show = !this.show;
}
},
template:
`
<transition mode="out-in" appear>
<div v-if="show">hello world </div>
<div v-else="show" >bye world </div>
</transition>
<button @click="handleClick">switch</button>
`
});
const vm = app.mount(&#39;#root&#39;);
</script></pre>上記のコードに示すように、CSS を使用してフェードイン効果とフェードアウト効果を定義し、アニメーション化する
を # に配置します。 ##300ff3b250bc578ac201dd5fb34a00046087faffb1c3f26530d25a6b190c2f81 タグの間で、Boolean 変数 show を使用して要素の表示と非表示を制御します。ボタンをクリックすると、 handleClick 関数が show に対して実行され、スイッチング効果を実現するために変数が反転されます。コードでは、mode="out-in" が遷移タグで使用されていることもわかります。この mode の値は、実際には mode=" in- out"、2 つの違いは次のとおりです。 mode="out-in"
#mode="in-out": 2 つの要素を切り替えると、表示される要素が最初に表示され、現在の要素が消えることを示します読者はこれら 2 つの要素を切り替えることができます すべての属性を試して効果を確認すると、印象はさらに深くなります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件间切换动画的实现</title>
<style>
.v-enter-from{
opacity: 0;
}
.v-enter-active{
transition: opacity 1s ease-in;
}
.v-enter-to{
opacity: 1;
}
.v-leave-from{
opacity: 1;
}
.v-leave-active{
transition:opacity 1s ease-in
}
.v-leave-to{
opacity: 0;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 多个单组件之间的动画
const ComponentA = {
template:'<div>hello world</div>'
}
const ComponentB = {
template:'<div>bye world</div>'
}
const app = Vue.createApp({
data() {
return {
component:'component-a'
}
},
methods: {
handleClick(){
if(this.component === 'component-a'){
this.component = 'component-b';
}else{
this.component = 'component-a';
}
}
},
components:{
'component-a':ComponentA,
'component-b':ComponentB
},
// 动态组件的方式
template:
`
<transition mode="out-in" appear>
<component :is="component" />
</transition>
<button @click="handleClick">switch</button>
`
});
const vm = app.mount('#root');
</script>
以上がVue3 で要素とコンポーネント間でアニメーションを切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。