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只有離開其本身才會觸發