Vue實現(xiàn)PC端靠邊懸浮球的代碼
更新時間:2020年05月09日 08:45:10 作者:意必固我
這篇文章主要介紹了Vue實現(xiàn)靠邊懸浮球(PC端)效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
我想把退出登錄的按鈕做成一個懸浮球的樣子,帶動畫的那種。
實現(xiàn)是這個樣子:
手邊沒有球形圖。隨便找一個,功能這里演示的為單機懸浮球注銷登錄
嗯,具體代碼:
<div :class="['meun-switch animated flex-row',uploadflag ? 'active rubberBand off' : 'leave jello']" @mouseleave="uploadleave" @mouseenter="uploadenter" v-if="uploadShow" @click.stop="logout" > <img :src="require('@/assets/1.png')"/> </div>
data
uploadShow: false, uploadflag: true,
js方法
uploadenter() { this.uploadflag = true; }, uploadleave() { this.uploadflag = false; }, uploadanimated() { setTimeout(() => { this.uploadShow = true; setTimeout(() => { this.uploadleave(); }, 1000); }, 1000); },
css
.off{ -webkit-animation:1s seconddiv; background: transparent; } @keyframes seconddiv{ 0% {transform: scale(1.4,1.4);} 10% {transform: scale(1,1);} 25% {transform: scale(1.2,1.2);} 50% {transform: scale(1,1);} 70% {transform: scale(1.2,1.2);} 100% {transform: scale(1,1);} } .meun-switch { position: fixed; top: 90px; left: 0px; z-index: 2001; cursor: pointer; width: 150px; height: 150px; padding: 5px; transition: all 0.25s; &.leave { left: -65px; } &.active { left: 0; } &:hover { transform: scale(1.02); } img { width: 120px; height: 120px; } }
總結(jié)
到此這篇關(guān)于Vue實現(xiàn)PC端靠邊懸浮球的代碼的文章就介紹到這了,更多相關(guān)Vue靠邊懸浮球內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue cli3 庫模式搭建組件庫并發(fā)布到 npm的流程
這篇文章主要介紹了Vue cli3 庫模式搭建組件庫并發(fā)布到 npm,以下一個簡單的顏色選擇器插件 vColorPicker 講述從開發(fā)到上線到npm的流程,需要的朋友可以參考下2018-10-10實例詳解vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法
這篇文章主要介紹了vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友參考下吧2018-08-08