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

本文主要是介绍vue如何通过opacity控制导航栏的动态显隐或其他样式的动画显隐效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

话不多说，先上图

这里两个导航栏分别是不同的组件（我使用的是Vue），但样式原理是一样的，可以用vuex或是父子组件传值的方式来控制v-show的true或false，在点击全屏按钮时，顶部导航栏会向父组件传递一个事件，在父组件进行监听，随后根组件会动态的向两个子组件（两个导航栏）派发当前v-show的值，之后我们通过settimeout函数令v-show这一事件做延迟处理，先让导航栏的opacity即透明度进行一个变化，待透明度完全变为0时（虽然此时透明度为0，不显示该元素，但仍然存在该元素，依旧会进行占位）触发v-show=“false”，这样 就达到了以上的效果

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

这里是点击全屏按钮时的函数

GeneralControl () {this.TOP = truethis.LEFT = truesetTimeout(() => {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中要声明好

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

这篇关于vue如何通过opacity控制导航栏的动态显隐或其他样式的动画显隐效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---