css 元素高度从0过度到auto的两种方案

 1.使用display: grid; 和 grid-template-rows: 0fr;

<div class="item">
	<div class="grid">
		<div>
			<ul class="ulAA" v-if="menuGroup.gongsijieshao.child.length > 0 ">
				<li v-for="item in menuGroup.gongsijieshao.child" :key="item.id">
					<a @click="toRichTextDefaultList(item.classifyLevel2)">{{
                      item.name
                    }}</a>
				</li>
				<li />
			</ul>
		</div>
	</div>
	<div>




		<style lang="scss" scoped>
			.item{
			  .grid {
			    display: grid;
			    grid-template-rows: 0fr;
			    transition: .3s;
			    overflow: hidden;
			    color: #ffbf00;
			    position: relative;
			    .ulAA{
			      list-style: none;
			      //这里一旦使用绝对定位，过度效果将会没有  
			    }
			  }
			
			  .grid>div{
			    min-height: 0;
			  }
			}
			
			
			.item:hover .grid{
			  grid-template-rows: 1fr;
			}
		</style>

2.使用vue的 <transition>

<el-col :span="2">
          <div class="item" @mouseleave="handleMouseLeave(menuGroup.chanpinfuwu.title.classifyLevel1)">
            <span v-if="menuGroup.chanpinfuwu.title.path == null"
                @mouseenter="handleMouseEnter(menuGroup.chanpinfuwu.title.classifyLevel1)"
                
            >{{
              menuGroup.chanpinfuwu.title.name
            }}</span>
            <span v-else
              ><a
                @click="
                  toRichTextDefaultList(
                    menuGroup.chanpinfuwu.title.classifyLevel2
                  )
                "
                class="separate"
                style="height: 12px"
                >{{ menuGroup.chanpinfuwu.title.name }}</a
              ></span
            >
            <!--<ul class="ul" v-if="menuGroup.chanpinfuwu.child.length > 0">
              <li v-for="item in menuGroup.chanpinfuwu.child" :key="item.id">
                <a @click="toRichTextDefaultList(item.classifyLevel2)">{{
                  item.name
                }}</a>
              </li>
              <li />
            </ul>-->
            <transition @enter="enter" @afterEnter="afterEnter" @leave="leave" @afterLeave="afterLeave">	  
              <ul class="ul" v-if="menuGroup.chanpinfuwu.child.length > 0 && ulShow[menuGroup.chanpinfuwu.title.classifyLevel1]">
                <li v-for="item in menuGroup.chanpinfuwu.child" :key="item.id">
                  <a @click="toRichTextDefaultList(item.classifyLevel2)">{{
                    item.name
                  }}</a>
                </li>
              </ul>
            </transition>
          </div>
        </el-col>

  ul.ul {
    //display:none;
    overflow: hidden;
    position: absolute;
    width: 120px;
    z-index: 600;
    list-style: none;
    padding: 0px 0px 0px 0px; /*去除ul圆点后,设置内边距*/
    /*background-color: gray;*/

    top: 54px;
    left: 10px;

    box-shadow: 0px 0px 2px #888888;

    transition: height 0.5s ease-in-out;
  }

  ul.ul li {
    line-height: 30px;
    width: 100%;
    color: #ffbf00;
    background-color:#c00000 ;
    padding: 0px 0px 0px 20px;
  }

methods: {
    enter(el) {
				el.style.height = 'auto';
				let endWidth = window.getComputedStyle(el).height;
				el.style.height = '0px';
				el.offsetHeight // force repaint
				el.style.height = endWidth;
			},
    afterEnter(el) {
      el.style.height = null;
    },
    leave(el) {
      el.style.height = window.getComputedStyle(el).height;
      el.offsetHeight // force repaint
      el.style.height = '0px';
      console.log(21212);
    },
    afterLeave(el) {
      el.style.height = null;
    },
    //进入
    handleMouseEnter(classifyLevel1){
      //this.ulShow[classifyLevel1] = true;
      this.$set(this.ulShow,classifyLevel1,true);
      //console.log(21212);
      //console.log(this.ulShow[classifyLevel1]);
    },
    //移出
    handleMouseLeave(classifyLevel1){
      this.$set(this.ulShow,classifyLevel1,false);
      //this.ulShow[classifyLevel1] = false;
      //console.log(333333);
      //console.log(this.ulShow[classifyLevel1]);
    }
  },