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只有离开其本身才会触发

  • 相关阅读:
    HPA
    docker 入门
    idea手动保存文本
    mac下安装配置sql plus
    oracle序列
    oracle存储过程
    Java正则表达式
    expect命令
    关于OneDrive/GoogleDrive推送的定价方案征询
    存储设备故障已修复,及对用户的补偿措施
  • 原文地址:https://www.cnblogs.com/qwfy-y/p/12717869.html
Copyright © 2011-2022 走看看