vue鼠标移入移除带动画事件实例

vue鼠标移入移除事件实例

文章目录

  • vue鼠标移入移除事件实例
    • 效果图:
    • 一. 技术分析
    • 二.实例的实现分析
      • 1. 初始状态
      • 2. 鼠标移入状态
      • 3. 鼠标移出状态
    • 三.源代码
    • 四.举一反三的例子

效果图:


vue鼠标移入移除带动画事件实例_第1张图片

vue鼠标移入移除带动画事件实例_第2张图片

一. 技术分析

vue所有的鼠标事件:

  1. 单击

    @click=‘click’

  2. 按下

    @mousedown=‘down’

  3. 抬起

    @mouseup=‘up’

  4. 双击

    @dblclick=‘dblclick’

  5. 移动

    @mousemove=‘move’

  6. 移除

    @mouseout=‘out’

  7. 离开

    @mouseleave=‘out’

  8. 进入

    @mouseenter=‘enter’

  9. @mouseover=‘enter’

  • 这个实例中只用到了8.进入和7.离开。
  • 6.移除mouseout和7.离开mouseleave的区别:
    • 不论鼠标指针离开被选元素还是任何子元素,都会触发mouseout事件
    • 只有在鼠标指针离开被选元素时,才会触发mouseleave事件

二.实例的实现分析

1. 初始状态

vue鼠标移入移除带动画事件实例_第3张图片

div高200px分为两部分每部分高200px,初始状态上部分显示,下部分隐藏

2. 鼠标移入状态

vue鼠标移入移除带动画事件实例_第4张图片
当鼠标移入时,整体向上移动200px,上部分隐藏漏出下部分

3. 鼠标移出状态

当鼠标移出时,整体不是向下移动,而是从上边200px的位置回到0px的位置

三.源代码





四.举一反三的例子

vue鼠标移入移除带动画事件实例_第5张图片

你可能感兴趣的:(Vue,vue,前端,鼠标移入移出,mouse事件)