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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
Java无向树分析 实现最小高度树
Apr 09 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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python装饰器使用方法实例
2013/11/21 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
python logging通过json文件配置的步骤
2020/04/27 Python
python3访问字典里的值实例方法
2020/11/18 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
会计电算化个人自我评价
2013/11/17 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
公司更名通知函
2015/04/24 职场文书
2016新年年会主持词
2015/07/06 职场文书