htmledit_views">

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

html"><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="shtml" title=css>css" 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>

html"><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>

html">  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;}

html">methods: {enter(el) {el.style.height = 'auto';let endWidth = window.getComputedStyle(el).height;el.style.height = '0px';el.offsetHeight // force repaintel.style.height = endWidth;},afterEnter(el) {el.style.height = null;},leave(el) {el.style.height = window.getComputedStyle(el).height;el.offsetHeight // force repaintel.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]);}},