vue实现鼠标经过动画
2019-11-04 18:06
2446 查看
本文实例为大家分享了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的精彩专题点击下方查看:
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- vue鼠标经过效果实现
- 纯css3实现鼠标经过图片显示描述的动画效果
- jQuery实现鼠标经过显示动画边框特效
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- vue实现app页面切换动画效果实例
- WinForm------TreeList实现鼠标经过节点背景色改变
- Arcgis for Js之鼠标经过显示对象名的实现
- jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
- jQuery插件jFade实现鼠标经过的图片高亮其它变暗
- 基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
- 用jquery实现单双行变色以及鼠标经过时也同时变色
- CSS+DIV实现鼠标经过背景变色 [onmouseover; onmouseout]
- Js鼠标经过选项卡实现原理Tab
- js实现鼠标经过表格行变色的方法
- JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
- 实现axios的统一封装API,axios结果格式处理,vue组件的loading动画变量在axios请求的前后改变
- 30款css3实现的鼠标经过图片显示描述特效
- jQuery实现感应鼠标动画效果自动伸长的输入框实例
- Vue中的基础过渡动画及实现原理解析