添加样式实现展开缩放动画，并隐藏滚动条

以vue为基础

div部分

      <button @click="boxshow = !boxshow">点击展开/关闭</button>
      <transition name="draw" mode="out-in">   
<!--这里的name 和 css 类名第一个字段要一样-->
              <div class="box"  v-show="boxshow">
              </div>
            </transition>

css

  .box{
    height:200px;width: 200px; //展开盒子的大小
  }
  .draw-enter-active, .draw-leave-active {
    transition: all 1s ease;
  }
  .draw-enter, .draw-leave-to /* .fade-leave-active below version 2.1.8 */ {
    height: 0;
  }

js

  
    data(){
          return {
            boxshow:false,         //展开关闭状态
            }

隐藏滚动条可以给外面的父元素属性加overflow:hidden,或者在外面套个div盒子，给overflow: hidden;

    overflow: hidden;