vue實現(xiàn)鼠標經(jīng)過動畫
更新時間：2019年10月16日 09:35:15 作者：兔子零84
這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標經(jīng)過動畫的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)鼠標經(jīng)過動畫的具體代碼，供大家參考，具體內容如下
詳細代碼：
<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使用路由的query配置項時清除地址欄的參數(shù)案例詳解
這篇文章主要介紹了vue使用路由的query配置項時如何清除地址欄的參數(shù)，本文通過案例給大家分享完美解決方案,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了前端vue-cropperjs實現(xiàn)圖片裁剪方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了Vue3基于rem比例H5縮放方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
本篇文章給大家詳細分享了Vue Elememt-UI構建管理后臺的過程以及相關代碼實例，一起參考學習下。2018-02-02
詳解mpvue scroll-view自動回彈bug解決方案
設置了scroll-top的scroll-view組件，在組件所在vue實例data發(fā)生改變時會自動回彈到最上方，非常具有實用價值，需要的朋友可以參考下2018-10-10
基于Electron24+Vite4+Vue3搭建桌面端應用實戰(zhàn)教程
這篇文章主要介紹了基于Electron24+Vite4+Vue3搭建桌面端應用,這次給大家主要分享的是基于electron最新版本整合vite4.x構建vue3桌面端應用程序，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue3 element-plus如何使用icon圖標組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在vue中使用css modules替代scroped的方法
本篇文章主要介紹了在vue中使用css modules替代scroped的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue-router傳遞參數(shù)分為兩大類，一類是編程式的導航 router.push另一類是聲明式的導航 <router-link>，本文通過實例代碼給大家介紹vue-router傳遞參數(shù)的幾種方式，感興趣的朋友跟隨小編一起看看吧2018-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)右側滑出層動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04