| vue鼠标移入移除带动画事件实例 | 您所在的位置：网站首页 › vue设置动画 › vue鼠标移入移除带动画事件实例 |
vue鼠标移入移除带动画事件实例
|
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的位置回到0px的位置 三.源代码 我是index export default { name: 'index', data () { return { mouseenter: false }; }, components: {}, computed: {}, mounted () { }, methods: { mouChange () { this.mouseenter = true }, mouChange1 () { this.mouseenter = false } } } .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; } } 四.举一反三的例子
|
当鼠标移入时，整体向上移动200px，上部分隐藏漏出下部分
【本文地址】
公司简介
联系我们