vue后台管理项目中涉及到展开和收起

• 实现的逻辑
• 实现的过程
• • • 如下代码（比较简单的过渡动画）
    • 如下代码（组件的具体写法）
    • 如下代码（组件触发前的展示）
    • 如下代码（组件触发前的相关的状态初始化）
    • 如下代码（事件方法的实现）

实现的逻辑

页面应该追求丝滑，过渡动画完美的解决了此类问题。而，vue中完美了解决，使用transition组件给vue中dom原始加入css过渡动画

实现的过程

①

1. .mybox-enter-active是控制载入时的样式名的后缀
2. .mybox-leave-active 是控制消失时的样式名的后缀
3. .mybox-enter是控制消失的样式名的后缀
4. .mybox-leave是控制消失的样式名的后缀

如下代码（比较简单的过渡动画）

可以放在局部样式或者全局样式中去，根据需求而定

  .mybox-leave-active,  .mybox-enter-active {    transition: all 1s ease;  }  .mybox-leave-active,  .mybox-enter {    height: 0px !important;  }  .mybox-leave,  .mybox-enter-active {    height: auto;  }

②

 <transition></transition>

transition组件，是vue自带的
通过属性name=样式名 来给其内的HTML标签添加过渡动画,vue会自动的根据dom元素改变从而添加载入动画和消失动画
appear 加上后会在第一次加载dom元素时就加载过渡动画

如下代码（组件的具体写法）

<transition name="mybox">    <div class="boxtransition" v-show="boxshow">    需要展开和收起的内容    </div></transition>

③
实现展开和收起时是需要触发事件的，展示一般为按钮或者文字链接绑定事件

如下代码（组件触发前的展示）

<el-button type="" @click="togglebox">{{isSpread ? '收起' : '展开'}}</el-button>

④
展示过程中应当初始化展示前的状态，具体应该在data中规定好初始化状态

如下代码（组件触发前的相关的状态初始化）

data(){  return{   isSpread: false,   boxshow: false, }      }

⑤
最后需要对绑定的事件逻辑进行代码编写，方法的实现

如下代码（事件方法的实现）

 methods: {    togglebox() {      this.boxshow = !this.boxshow      this.isSpread = !this.isSpread    }  }

⑥
最后，vue项目中基本的展开和收起，用vue自带的过渡动画简单的解决了。