vue鼠标移入移除事件实例

文章目录

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

效果图:

一. 技术分析

vue所有的鼠标事件：

单击

@click=‘click’
按下

@mousedown=‘down’
抬起

@mouseup=‘up’
双击

@dblclick=‘dblclick’
移动

@mousemove=‘move’
移除

@mouseout=‘out’
离开

@mouseleave=‘out’
进入

@mouseenter=‘enter’
在

@mouseover=‘enter’

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

二.实例的实现分析

1. 初始状态

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

2. 鼠标移入状态

当鼠标移入时，整体向上移动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>

四.举一反三的例子

vue鼠标移入移除带动画事件实例相关推荐

Axure交互-鼠标移入移除显示与隐藏
Axure交互-鼠标移入移除显示与隐藏 1.场景描述画布布局为两个元件,按钮和图片.通过对按钮添加交互实现鼠标移入时图片显示,移出按钮时图片隐藏. 2.新增按钮移入移出交互 2.1.添加两个元件 2 ...
【HTML】js控制代码，鼠标移入移除改变颜色
非常简单的一段小代码! 鼠标移入移除显示不同的颜色. 标题标题 <!DOCTYPE html> <html><head><meta charset=&quo ...
微信小程序之自定义模态弹窗（带动画）实例
代码地址如下: http://www.demodashi.com/demo/13991.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
html鼠标移入移除事件,js鼠标移入移出事件样例
javaScript实例 li{background-color:#eee;height:25px;margin-top:2px;} //添加鼠标移入移出事件 function fun(){ //获取 ...
第12章[12.4] 鼠标移入移除时弹出和关闭窗口
需要实现功能的规格描述鼠标进入某个区域时自动弹出一个新窗口,在该新窗口中可以做一些选择等功能但鼠标离开新窗口时,自动关闭该新窗口. 类似菁优网在组卷时选取教材版本和年级的功能,页面如下: 框架实现 ...
css3 背景大小background-size属性实现鼠标移入文字下划线动画效果
最近看到一个页面有一个很有趣的动画,就是鼠标移入后,在对应的文字下方会出现下划线的动画效果,当鼠标移除后,下划线动画会消失,于是想了下该如何去实现这个动画效果. 第一个想法是想通过with来做,但是这 ...
VUE鼠标移入移出改变元素样式
这种功能实际开发中用的特别多,但是写起来的话有点点麻烦,演示两种方案,第一种就是常规的class和style绑定,第二种是使用event来搞定,个人觉得event比较比较简单,不用设置那么多的中间变量 ...
vue鼠标移入移出事件注意事项
发生冒泡事件今天在写一个鼠标的移入移出的事件,使用mouseout和mouseover期间,踩了一个大坑,经过半天的排查,终于发现是发生了冒泡事件. 把mouseout和mouseover绑在父元素 ...
jq鼠标移入移除事件
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

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

vue鼠标移入移除事件实例

文章目录

效果图:

一. 技术分析

二.实例的实现分析

1. 初始状态

2. 鼠标移入状态

3. 鼠标移出状态

三.源代码

四.举一反三的例子

vue鼠标移入移除带动画事件实例相关推荐

最新文章

热门文章