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每次Title显示不同的名言
Sep 25 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
微信小程序云开发之使用云函数
May 17 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 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作的文本留言本的例子(五)
2006/10/09 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
Laravel框架表单验证详解
2014/09/04 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中MySQLdb模块用法实例
2014/11/10 Python
Golang与python线程详解及简单实例
2017/04/27 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
对Python 语音识别框架详解
2018/12/24 Python
如何通过python实现全排列
2020/02/11 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
Python操作Excel的学习笔记
2021/02/18 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
计算机应用专业推荐信
2013/11/13 职场文书
中年人生感言
2014/02/04 职场文书
实践单位评语
2014/04/26 职场文书
十八大宣传标语
2014/10/09 职场文书
开学典礼校长致辞
2015/07/29 职场文书
创业计划书之服装
2019/10/07 职场文书