在頁面首次開啟的載入內容,是最容易的,透過根目錄index.html
檔
在43385b86c17e4e8e6ef603bd5efdffc9
裡加入內容,就是過度內容
<body> <div id="app"> <h2>加载中......</h2> </div> <script type="module" src="/src/main.js"></script> </body>
當vue實例建立完成,透過.mount()
方法掛載到id='app'
的div 裡,會替換掉裡的loading
內容;
路由切換過度需要先了解一個,vue3
的內建元件 #b7d391b0a8e9eea5e525c473b7ead7d2
;
cd8f95828a036a4c6af53592a2bc8053<p> 提供 <code>2
個插槽????;
#default
: 一個要載入的內容;
##fallback: 一個載入種顯示的內容;
<Suspense> <template #default> <router-view /> </template> <template #fallback> <h2>加载中......</h2> </template> </Suspense>同理:( 非同步元件的切換)
<pre class="brush:js;"><template>
<Suspense>
<template #default>
<AsyncComp v-if = &#39;vitblie&#39; />
</template>
<template #fallback>
<h2>加载中......</h2>
</template>
</Suspense>
<button @click=&#39;open&#39;> 切换 </button>
</template>
<script setup>
import { defineAsyncComponent , ref } from &#39;vue&#39;;
const asyncComp = defineAsyncComponent(()=>important(&#39;./asyncComp.vue));
const vitblie = ref(false);
function open(){
vitblie.value = !vitblie.value;
}
</script></pre>
非同步元件也是可以使用相同的方法添加過度動畫
新增過度動畫需要先了解
內建元件9366e37985177da7839522e36133b6c8
和87a2e53b90599db3250d06933523db3b
????
9366e37985177da7839522e36133b6c8
: 非常簡單只有一個is 顯示這個元件,可以用來元件切換如:<pre class="brush:php;toolbar:false"> <template>
<Component :is="visible ? TestComp : &#39;&#39; " />
</template></pre>
87a2e53b90599db3250d06933523db3b
: 內插入的內容
新增過度動畫,透過name
屬性來拼接
如:# = ><template> <transition name='anime'> <TestComp v-if='visblte' /> </transition> </template>設定樣式透過
name 屬性這裡anime-enter-active#: 過度態( 設定隱藏=> 顯示
過度的時間等參數)anime-leave-active
: 過度態( 設定顯示=> 隱藏
過度的時間等參數)
anime-enter -from=>
anime-enter-to隱藏=> 顯示 開始與結束的樣式anime-leave-from
anime-leave-to
###顯示=> 隱藏### 開始和結束的樣式#########組合????##<template> <router-view v-slot={ Component } > <transition name='anime'> <component :is="Component" /> <transition> </router-view> <template> <style scoped> .anime-enter-active, .anime-leave-active { transition: all 1s; } .anime-leave-from { transform: translateY(0); } .anime-leave-to { transform: translateY(-100%); } .anime-enter-from { transform: translateY(100%); } .anime-enter-to { transform: translate(0); } </style>
以上是vue3怎麼解決各場景loading過度的詳細內容。更多資訊請關注PHP中文網其他相關文章!