vue transition的延時播放實踐過程
更新時間：2025年12月17日 09:34:57 作者：待煎的前端
文章介紹了如何使用JavaScript的`setTimeout`和Vue.js的`v-show`指令實現(xiàn)頁面自動播放,并通過CSS的`transition`和`animation`屬性控制動畫的播放時間
1、顯示的控制（利用setTimeout控制v-show）
這里利用了mounted() 生命周期函數(shù)，實現(xiàn)頁面自動播放
<template>
<div class="container">
<transition name="bounce-in">
<div v-show="show" class="Demo">bounce-in</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
},
mounted() {
setTimeout(() => {
this.show = true;
}, 2000)
}
}
</script>
<style>
.bounce-in-enter-active {
animation: bounce-in .5s;
}
.bounce-in-enter,
.bounce-in-leave-to {
opacity: 0;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.Demo{
color: #FFFFFF;
width: 300px;
height: 300px;
background-color: #0088FF;
position: absolute;
top:25%;
left:25%;
}
</style>
2、CSS的設(shè)置
（可以使用transition+transition-delay控制，animation+animation-delay也可以但是初始就顯示了）
transition使用時，可以使用transition-delay延時播放
<template>
<div class="container">
<transition name="bounce-in">
<div v-show="show" class="Demo">bounce-in</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
},
mounted() {
this.show = true;
}
}
</script>
<style>
.bounce-in-enter-active {
transition: all 0.3s ease;
transition-delay: 2s;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.bounce-in-enter,
.bounce-in-leave-to {
transform: translateX(100px);
opacity: 0;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.Demo{
color: #FFFFFF;
width: 300px;
height: 300px;
background-color: #0088FF;
position: absolute;
top:25%;
left:25%;
}
</style>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vuex中的getter和mutation的區(qū)別詳解
在現(xiàn)代前端開發(fā)中,狀態(tài)管理是一個不可忽視的話題,而Vuex作為Vue.js的官方狀態(tài)管理庫,在大型應(yīng)用中扮演著至關(guān)重要的角色,當我們使用Vuex進行狀態(tài)管理時,getter和mutation是兩個重要的概念,在本文中,我們將詳細探討getter和mutation的區(qū)別,需要的朋友可以參考下2024-12-12
基于Electron+Vite快速構(gòu)建Vue3桌面應(yīng)用
這篇文章主要介紹了如何基于Electron和Vite快速構(gòu)建Vue3桌面應(yīng)用，本文主要技術(shù)棧就是Vue3、vite、Electron，文中有詳細的代碼示例,需要的朋友可以參考下2023-07-07
Vue 作為一款流行的前端框架,提供了多種方式來定義組件,包括單文件組件、渲染函數(shù)、、JSX/TSX 以及函數(shù)式組件、不同的方式適用于不同的場景,本文將對這四種方式進行詳細對比,幫助你找到最適合自己項目的方案,需要的朋友可以參考下2025-03-03![vue文件代碼縮進以及格式化代碼方式[自定義]](http://img.jbzj.com/images/xgimg/bcimg3.png)
這篇文章主要介紹了vue文件代碼縮進以及格式化代碼方式[自定義],具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。這篇文章給大家介紹Vue仿手機qq的實例代碼，需要的的朋友參考下吧2017-09-09
Vue中通過vue-router實現(xiàn)命名視圖的問題
這篇文章主要介紹了在Vue中通過vue-router實現(xiàn)命名視圖,本文給大家提到了vue-router的原理解析，給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細介紹了如何使用Vue自定義實現(xiàn)一個計算器組件,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2025-06-06
這篇文章主要介紹了Vue如何引入icon圖標,本文通過圖文并茂的形式給大家介紹的非常詳細，需要的朋友可以參考下2018-03-03
vue-calendar-component 封裝多日期選擇組件的實例代碼
這篇文章主要介紹了vue-calendar-component 封裝多日期選擇組件,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
今天小編就為大家分享一篇vuejs 動態(tài)添加input框的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08