vue如何通过opacity控制导航栏的动态显隐或其他样式的动画显隐效果

如何通过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中要声明好

好啦，以上就是这个效果的显示方式啦！希望我们一同进步