vue實現(xiàn)鼠標(biāo)經(jīng)過動畫
更新時間：2019年10月16日 09:35:15 作者：兔子零84
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)鼠標(biāo)經(jīng)過動畫的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)鼠標(biāo)經(jīng)過動畫的具體代碼，供大家參考，具體內(nèi)容如下
詳細(xì)代碼：
<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>
更多關(guān)于Vue的精彩專題點擊下方查看：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
通過debug搞清楚.vue文件如何變成.js文件(案例詳解)
這篇文章主要介紹了通過debug搞清楚.vue文件如何變成.js文件,本文以@vitejs/plugin-vue舉例,通過debug的方式帶你一步一步的搞清楚vue文件是如何編譯為js文件的,需要的朋友可以參考下2024-07-07
Vue3.x+Element Plus仿制Acro Design簡潔模式實現(xiàn)分頁器組件
開發(fā)中難免會遇到寬度很窄的列表需要使用分頁器的情況。本文將利用Vue3.x+Element Plus仿制Acro Design簡潔模式實現(xiàn)分頁器組件，感興趣的可以了解一下2023-02-02
這篇文章主要為大家詳細(xì)介紹了Vue.js路由實現(xiàn)選項卡簡單實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了element-ui 文件上傳修改文件名的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue實現(xiàn)指令式動態(tài)追加小球動畫組件的步驟
這篇文章主要介紹了Vue實現(xiàn)指令式動態(tài)追加小球動畫組件的步驟，幫助大家更好的理解和實用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)拖拽式分割布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue項目中canvas實現(xiàn)截圖功能，截取圖片的一部分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要介紹了vue 面包屑導(dǎo)航組件封裝，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue?@click?@tap重疊事件區(qū)分方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Element el-checkbox-group v-model不支持對象(object)解決方案
本文主要介紹了Element el-checkbox-group v-model不支持對象(object)解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05