vue:鼠标停留1s执行function() （解决停留1s 执行过渡动画等问题）

1.通过添加和删除计时器来给定

html部分

原理：
①：鼠标移入元素；
②：计时器开始计时；
③：事件达到1s；
④：开始执行；
⑤：鼠标移出；
⑥：清除计时器；

①：鼠标移入元素；
②：计时器开始计时；
③：事件未达到1s；
④：清除计时器

    <li class="nav-left-item" @mouseenter="menuShow" @mouseleave="menuHidden">
		   <transition class="menu-fade-wrap" name="menu-fade">
		   		<div v-if="flag" class="second-menu-message">
                </div>
		   </transition>
	</li>

DATA部分

设置一个计时器 time

  data() {
    return {
      Time:false,
      Time:'',
    };

function部分

menuShow(){
  this.Time = setTimeout(() => {
    this.flag = true
  }, 1000);
},
menuHidden(){
  clearTimeout(this.Time)
  this.flag = false
}

**

css动画部分

**

.menu-fade-enter,
.menu-fade-leave-to{
  position: absolute;
  top: 0;
  opacity: 0;
  transform: translateY(-10px);
}
.menu-fade-enter-active,
.menu-fade-leave-active{
  position: absolute;
  top: 0;
  transition: all .3s;
}