Vue實現PC端靠邊懸浮球的代碼

發布時間: 2020-05-09 09:31:12 來源: 互聯網 欄目: JavaScript 點擊:

這篇文章主要介紹了Vue實現靠邊懸浮球(PC端)效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

我想把退出登錄的按鈕做成一個懸浮球的樣子,帶動畫的那種。

實現是這個樣子:

手邊沒有球形圖。隨便找一個,功能這里演示的為單機懸浮球注銷登錄

Vue實現PC端靠邊懸浮球的代碼

Vue實現PC端靠邊懸浮球的代碼

嗯,具體代碼:

<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;
  }
 }

總結

到此這篇關于Vue實現PC端靠邊懸浮球的代碼的文章就介紹到這了,更多相關Vue靠邊懸浮球內容請搜索我們以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持我們!

本文標題: Vue實現PC端靠邊懸浮球的代碼
本文地址: http://www.1921352.live/wangluo/javascript/312665.html

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 支付寶先領紅包再贊助
    聲明:凡注明"本站原創"的所有文字圖片等資料,版權均屬編程客棧所有,歡迎轉載,但務請注明出處。
    JavaScript面向對象核心知識與概念歸納整理JavaScript進階(一)變量聲明提升實例分析
    Top 网上挖矿机赚钱 适合长期投资股票排名 内蒙古11选5玩法规则 分析股票的方法与步骤 王中王493333中特一网 小说 山西11选网站 群英会任2中了多少钱 山西快乐十分胆拖规则奖金 阿里股票代码 幸运pc28蛋蛋预测 好彩一开好彩奖结果