vue实现鼠标经过动画


Posted in Javascript onOctober 16, 2019

本文实例为大家分享了vue实现鼠标经过动画的具体代码,供大家参考,具体内容如下

vue实现鼠标经过动画

详细代码:

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <div class="box">
 <div class="boxchilde" @mouseenter="flag=true" @mouseleave="flag=false">
 <div :class="flag?'passing':''"></div>
 </div>
 </div>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
 return {
 msg: 'Welcome to Your Vue.js App',
 flag:false
 }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .box{
 width: 100%;
 height: 100%;
 }
 .boxchilde{
 display: inline-block;
 margin: 20px;
 width: 200px;
 height: 400px;
 background-color: #ccc;
 border-radius: 5px;
 -webkit-transition: all 0.6s ease-in;
 -moz-transition: all 0.6s ease-in;
 -ms-transition: all 0.6s ease-in;
 -o-transition: all 0.6s ease-in;
 transition: all 0.6s ease-in;
 overflow: hidden;
 }
 .boxchilde:hover{
 cursor: pointer;
 -webkit-transform: translate(0,-10px);
 -moz-transform: translate(0,-10px);
 -ms-transform: translate(0,-10px);
 -o-transform: translate(0,-10px);
 transform: translate(0,-10px);
 }
 .passing {
 width: 100%;
 height: 10px;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 background-color: red;
 animation: passing_4500 0.8s ease-in-out 0s 1 alternate forwards;
 transform-origin: 50% 50%;
 }
 @keyframes passing_4500 {
 0% { transform:translateX(-100%); opacity:0 }
 33.33333% { transform:translateX(-100%); opacity:0 }
 66.66667% { transform:translateX(0%); opacity:1 }
 100% { transform:translateX(0%); opacity:1 }
 }
</style>

更多关于Vue的精彩专题点击下方查看:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
如何快速上手Vuex
Feb 14 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
javascript实现动态时钟的启动和停止
Jul 29 #Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 #Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 #Javascript
javascript实现点亮灯泡特效示例
Oct 15 #Javascript
vue-cli 为项目设置别名的方法
Oct 15 #Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 #Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 #Javascript
You might like
一个ubbcode的函数,速度很快.
2006/10/09 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
vue 实现特定条件下绑定事件
2019/11/09 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
python3.0 字典key排序
2008/12/24 Python
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python 3中的yield from语法详解
2017/01/18 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
马云的职业生涯规划之路
2014/01/01 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
产品售后服务承诺书
2014/05/21 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
会计电算化实训报告
2014/11/04 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
golang生成并解析JSON
2022/04/14 Golang