发表于: 2020-01-07 23:40:55

1 1551


今天完成的事情:

做了一个下拉菜单的动画效果,用的是vue的过度,通过用transiton标签包裹要执行动画的组件,然后添加6个class,这六个class会在适当的时候添加上去:

主要就是这6个class类型,需要注意的是transition标签下的子标签的高度是需要确定的,因为我们在做页面的时候经常选择不定高来实现页面,如果要用transition实现动画,我们就需要给他设置一个确定的高,然后最好设置成max-height,否则下拉之后,手风琴效果展示会不全面。同时transition的类名也设置成max-height,,

代码如下:

      <transition name="mynav">
        <Nav ref="mynav" v-show="navShow"></Nav>
      </transition>
  .mynav-enter-active, .mynav-leave-active {
    transition: all 1s;
  }
  .mynav-enter, .mynav-leave-to {
    max-height: 0px;
  }
nav {
  background-color: #232a3a;

  max-height: 464px;

}

还有就是被包裹的组件可以通过v-show来实现点击按钮隐藏和显示,而transition标签会监听这个事件。

还有一种方法可以实现同样的效果,需要的是写一个函数来实时获取高度,目前的想法是点击按钮之后显示让nav组件显示出来获取高度,然后再隐藏,再然后通过下拉动画来显示。想法还没有通过代码去实现,等做完主要功能之后再进行完善


返回列表 返回列表
评论

    分享到