zoukankan      html  css  js  c++  java
  • 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只有离开其本身才会触发

  • 相关阅读:
    truncate table
    SSIS学习笔记
    Bing Developer Assistant开发随记
    数组中的逆序对
    第一个只出现一次的字符
    丑数
    把数组排成最小的数
    连续子数组的最大和
    最小的k个数
    数组中出现次数超过一半的数字
  • 原文地址:https://www.cnblogs.com/qwfy-y/p/12717869.html
Copyright © 2011-2022 走看看