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 相关文章推荐
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
node.js文件操作系统实例详解
Nov 05 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
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
用javascript操作xml
2006/11/04 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
JS中的BOM应用
2018/02/02 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
一行python实现树形结构的方法
2019/08/09 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
C语言面试题
2015/10/30 面试题
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
在python中实现导入一个需要传参的模块
2021/05/12 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
Python OpenCV形态学运算示例详解
2022/04/07 Python