vue实现鼠标经过动画
5星 · 超过95%的资源 16 浏览量
2020-10-16
04:43:19
上传
评论
收藏 31KB PDF 举报 
vue实现鼠标经过动画实现鼠标经过动画
主要为大家详细介绍了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>
资源评论
书看不完了2023-07-27作者在这个文件中使用了一些简单但巧妙的技巧，让我对Vue的使用有了新的认识。
daidaiyijiu2023-07-27我通过这个文件学到了很多关于Vue动画的知识，对我的项目有很大的启发。
张盛锋2023-07-27这个文件不仅提供了代码，还解释了每个步骤的原理，对于想深入学习Vue的人来说非常有帮助。
SLHJ-Translator2023-07-27作者对这个主题的讲解很详细，让我能够轻松地理解并跟随代码的实现。
一曲歌长安2023-07-27这个文件很实用，能够很好地演示了用Vue实现鼠标经过动画的方法。
