本文实例为大家分享了vue实现鼠标经过动画的具体代码,供大家参考,具体内容如下
详细代码:
& lt; template>
& lt; div类=癶ello”比;
& lt; h2>{{味精}}& lt;/h2>
& lt; div类="盒子"比;
& lt; div类=" boxchilde " @mouseenter=肮?true”@mouseleave=肮?false”比;
& lt; div: class="国旗# 63;“传递”:““祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“HelloWorld”,
数据(){
返回{
味精:“欢迎来到你的Vue。js应用”,
国旗:假
}
}
}
& lt;/script>
& lt; !——“作用域”属性限制CSS添加到该组件只——比;
& lt; scoped>风格;
.box {
宽度:100%;
高度:100%;
}
.boxchilde {
显示:inline-block;
保证金:20 px;
宽度:200 px;
身高:400 px;
background - color: # ccc;
border - radius: 5 px;
-webkit-transition:所有0.6 s在;
-moz-transition:所有0.6 s在;
-ms-transition:所有0.6 s在;
-o-transition:所有0.6 s在;
过渡:所有0.6 s在;
溢出:隐藏;
}
.boxchilde:{徘徊
光标:指针;
-webkit-transform:翻译(0,-10 px);
-moz-transform:翻译(0,-10 px);
-ms-transform:翻译(0,-10 px);
-o-transform:翻译(0,-10 px);
变换:翻译(0,-10 px);
}
. pas {
宽度:100%;
高度:10 px;
border-top-left-radius: 5 px;
border-top-right-radius: 5 px;
背景颜色:红色;
动画:passing_4500 0.8 ease-in-out 0 1交替向前;
transform-origin: 50% - 50%;
}
@keyframes passing_4500 {
0%{变换:translateX (-100%);透明度:0}
33.33333%{变换:translateX (-100%);透明度:0}
66.66667%{变换:translateX (0%);透明度:1}
100%{变换:translateX (0%);透明度:1}
}
& lt;/style>
更多关于Vue的精彩专题点击下方查看:
Vue.js组件学习教程
Vue.js实战教程
Vue.js前端组件学习教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
