技術標籤：vuejavascriptjscss

如何通過opacity控制導航欄的動態顯隱或其他樣式的動畫顯隱效果

話不多說，先上圖

這裡兩個導航欄分別是不同的元件（我使用的是Vue），但樣式原理是一樣的，可以用vuex或是父子元件傳值的方式來控制v-show的true或false，在點選全屏按鈕時，頂部導航欄會向父元件傳遞一個事件，在父元件進行監聽，隨後根元件會動態的向兩個子元件（兩個導航欄）派發當前v-show的值，之後我們通過settimeout函式令v-show這一事件做延遲處理，先讓導航欄的opacity即透明度進行一個變化，待透明度完全變為0時（雖然此時透明度為0，不顯示該元素，但仍然存在該元素，依舊會進行佔位）觸發v-show=“false”，這樣 就達到了以上的效果

methods: {
    ChangeNav () {
      this.TopOpacity = 0
      this.LeftOpacity = 0
      this.transition = 'all 1s'
      setTimeout(() => {
        this.TOP = false
        this.LEFT = false
      }, 1000)
    }

這裡是點選全屏按鈕時的函式

GeneralControl () {
      this.TOP = true
      this.LEFT = true
      setTimeout
 
(() => {
        this.TopOpacity = '1'
        this.LeftOpacity = '1'
        this.transition = '0.8s'
      }, 800)
    },

這個是恢復兩條導航欄的顯示

template>
  <div class="container">
    <top-navbar
    :TOP="TOP"
    @ChangeNav="ChangeNav"
    :style="{ 'opacity': TopOpacity, 'transition' : transition }"
 

    @NeedChangePlace="ChangePlace"
    @NeedReplace="Replace"
    ></top-navbar>

    <left-navbar
    :LEFT="LEFT"
    :style="{ 'opacity': LeftOpacity, 'transition': transition, 'top' : LeftNavTop }"
    @NeedChangeInnerwrapper="NeedChangeInnerwrapper"
    @NeedReplaceInnerwrapper="NeedReplaceInnerwrapper"
    >
    </left-navbar>

當然這裡要提前在data中定義好，並且通過屬性繫結的方式將兩個導航欄的樣式繫結好

TOP: true,
      LEFT: true,
      TopOpacity: '1',
      LeftOpacity: '1',
      transition: '',

data中要宣告好

好啦，以上就是這個效果的顯示方式啦！希望我們一同進步