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

爱被打了一巴掌 2022-11-29 11:55 409阅读 0赞

# vue鼠标移入移除事件实例 #

### 文章目录 ###

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

## 效果图: ##

![效果图][20200817171513511.gif_pic_center]  
![在这里插入图片描述][20200820135207251.gif_pic_center]

![在这里插入图片描述][20200820135121282.gif_pic_center]

## 一. 技术分析 ##

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. 初始状态 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE2NzU0Ng_size_16_color_FFFFFF_t_70_pic_center]

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

### 2. 鼠标移入状态 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE2NzU0Ng_size_16_color_FFFFFF_t_70_pic_center 1]  
当鼠标移入时，整体向上移动200px，上部分隐藏漏出下部分

### 3. 鼠标移出状态 ###

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

## 三.源代码 ##

<template>
      <div class="index">
        我是index
        <div class="all" v-on:mouseenter="mouChange($event)" v-on:mouseleave="mouChange1($event)">
          <div class="top" :class="mouseenter==true?'change':'change1'"></div>
          <div class="bottom" :class="mouseenter==true?'change':'change1'"></div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'index',
      data () {
        return {
          mouseenter: false
        };
      },
    
      components: {},
    
      computed: {},
    
      mounted () { },
    
      methods: {
        mouChange () {
          this.mouseenter = true
        },
        mouChange1 () {
          this.mouseenter = false
        }
      }
    }
    
    </script>
    <style lang='less' scoped>
    .all {
      width: 100px;
      height: 200px;
      background-color: #afc;
      border: 3px solid #000;
      position: relative;
      margin-top: 300px;
      margin-left: 100px;
      .top {
        width: 100px;
        height: 200px;
        background-color: #acf;
        position: absolute;
        top: -0px;
        z-index: 100;
      }
      .bottom {
        width: 100px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 200px;
        z-index: 100;
      }
    }
    .all .change {
      animation: myMou 0.5s;
      animation-fill-mode: forwards;
    }
    .all .change1 {
      animation: myMou1 0.5s;
      animation-fill-mode: forwards;
    }
    @keyframes myMou {
      0% {
        margin-top: 0px;
      }
      100% {
        margin-top: -200px;
      }
    }
    @keyframes myMou1 {
      0% {
        margin-top: -200px;
      }
      100% {
        margin-top: 0px;
      }
    }
    </style>

## 四.举一反三的例子 ##

![在这里插入图片描述][20200820140034638.gif_pic_center]

[20200817171513511.gif_pic_center]: /images/20221124/01976de479be43d68fbee82d1ac6599f.png
[20200820135207251.gif_pic_center]: /images/20221124/778bc8ae40034844a2dc0ea9ec17142b.png
[20200820135121282.gif_pic_center]: /images/20221124/d33084c55014478c9eb0f1d47b008b75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE2NzU0Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/fdc1e7cdd1aa4452a666d374f7f4b255.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE2NzU0Ng_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/8469f1f241a6403ba4769a15677a7f33.png
[20200820140034638.gif_pic_center]: /images/20221124/f49a2ecd23314bfd9759bc15727c9a8b.png