【Vue】transition讓你的v-if和v-show有個美美的過渡與影片-有解無憂

【Vue】transition讓你的v-if和v-show有個美美的過渡與影片

博客說明

文章所涉及的部分資料來自互聯網整理，當然還有自己個人的總結和看法，分享的目的在于共建社區和鞏固自己，參考的資料如有侵權，請聯系本人洗掉！幸好我在，感謝你來！

說明

產品說：要你在這個這個顯示的時候，那個不要顯示，但是怎么突然就沒了，這樣用戶會不會覺得這是個Bug？

Bug：？？？

其實這個是我們在vue中最平常使用的v-if和v-show指令，

生硬的業務場景切換，讓產品感徑訓可以優化的錯覺

那么就再來優化一下！加個影片？

過渡影片

當然先看看官網的說法，地址

影片案例

主要是一個文字的漸變的程序影片，

代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue過渡影片</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>

.fade-enter-active, .fade-leave-active {
    transition: opacity 2s
}
.fade-enter-to, .fade-leave-to {
    opacity: 0
}
</style>
</head>
<body>
<div id="container">
	<button v-on:click="show = !show">點我</button>
	<transition name="fade" appear="true">
    <p v-show="show" v-bind:style="styleText">看我</p>
	</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#container',
    data: {
        show: true,
        styleText :{
            styleText: '30px',
            color: 'red'
        }
    },
    methods : {
    }
});
</script>
</body>
</html>

效果

2022-01-04 18.10.00

影片引數

注意v是代替我們在transition的name屬性

例如

<transition name="plus">
   <div>hello</div>
</transition>

// css
.plus-enter {
	background: red;
}

引數串列

v-enter：定義進入過渡的開始狀態，在元素被插入之前生效，在元素被插入之后的下一幀移除，
v-enter-active：定義進入過渡生效時的狀態，在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/影片完成之后移除，這個類可以被用來定義進入過渡的程序時間，延遲和曲線函式，
v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態，在元素被插入之后下一幀生效 (與此同時 v-enter 被移除)，在過渡/影片完成之后移除，
v-leave: 定義離開過渡的開始狀態，在離開過渡被觸發時立刻生效，下一幀被移除，
v-leave-active：定義離開過渡生效時的狀態，在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/影片完成之后移除，這個類可以被用來定義離開過渡的程序時間，延遲和曲線函式，
v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態，在離開過渡被觸發之后下一幀生效 (與此同時 v-leave 被洗掉)，在過渡/影片完成之后移除，

然后發現官方的檔案里面寫了有九個class

那么缺少的也發出來吧，以下這三個用的不多，有要使用的小伙伴可以試試哈！

v-appear：定義在初始渲染時的開始狀態，
v-appear-active：定義初始渲染時的狀態，這個類可以被用來定義進入過渡的程序時間，延遲和曲線函式，
v-appear-to: 定義初始渲染時的結束狀態，

配合影片庫

自己手寫的影片效果難免費勁，不如別人寫的影片庫，那么能偷個懶嗎？

能！

兩個優秀的影片庫

可以搭配影片庫使用，推薦兩個影片庫animate.css與vivify.css

animate.css

vivify.css

以上就是兩個影片庫，大家有興趣可以去看看

通過自定義class使用

animate.css的影片庫結合使用

<transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
>
    <p v-if="show">好看呀</p>
</transition>

通過影片直接使用

通過影片引數，在animation中使用影片效果，

<transition name="fade-box">
   <div v-show="show" class="box"></div>
</transition>

// css
.fade-box-leave-to {
 animation: bounceOutRight 0.8s;
}

事件鉤子🪝

JavaScript鉤子

before-enter
before-leave
before-appear
enter
leave
appear
after-enter
after-leave
after-appear
enter-cancelled
leave-cancelled (v-show only)
appear-cancelled

當只用 JavaScript 過渡的時候，在 enter 和 leave 中必須使用 done 進行回呼，否則，它們將被同步呼叫，過渡會立即完成，

案例

<transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
  >
    <p v-if="show">hello</p>
</transition>


// javascript
beforeEnter: function (el) {
  console.log(el)
},

enter: function (el, done) {
  console.log(el)
	done()
},

小結

Vue的v-if和v-show也還是有許多可玩性的，transition這個組件看看我們代碼中有好好的使用到了嗎？能否給業務帶來幫助呢？

感謝

萬能的網路

菜鳥教程

以及勤勞的自己，個人博客，GitHub學習，GitHub

公眾號【歸子莫】，小程式【小歸博客】

如果你感覺對你有幫助的話，不妨給我點贊👍吧，持續關注也行哈！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/404373.html

標籤：其他

上一篇：2022 最值得學習的編程語言：Python 高人氣，Ruby 薪水最優渥

下一篇：【React作業記錄二十五】ant design form表單驗證問題