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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
js实现楼层导航功能
Feb 23 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
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
php使用json_encode对变量json编码
2014/04/07 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
Python基于动态规划算法计算单词距离
2015/07/25 Python
python黑魔法之参数传递
2016/02/12 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python调试神器PySnooper的使用
2019/07/03 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
.net C#面试题
2012/08/28 面试题
几道Java和数据库的面试题
2013/05/30 面试题
五十岁生日宴会答谢词
2014/01/15 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
英语教师个人总结
2015/02/09 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android