Vue和原生Html简单实现淡入淡出动画效果

一、Vue方法

只需给需要动画的标签绑定mouserover和mouseleave事件来动态改变其opacity属性即可实现。

 <div
      id="Enter"
      class="center"
      @mouseleave="opac = 0"
      @mouserover="opac = 0.8"
      :style="{ opacity: opac }"
    >淡入淡出</div>

二、原生Html

同理，只需监听标签的onmouseover和onmouseout事件来动态改变其opacity属性即可实现。

<script type="text/javascript">
  var enter = document.getElementById('Enter')
  enter.onmouseover = function() {
    enter.style.opacity = 0.8
  }
  enter.onmouseout = function() {
    enter.style.opacity = 0
  }
</script>

补充一点：
mouseenter和mouseover的区别，mouseenter要穿过其本身才能触发事件，穿过子元素不行，而mouseover不论是穿过父元素还是子元素都能触发事件
onmouseout和mouseleave的区别，mouseout只要离开任意元素就触发，mouseleave只有离开其本身才会触发