欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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腳手架的下載和配置步驟詳解

    VUE腳手架的下載和配置步驟詳解

    這篇文章主要介紹了VUE腳手架下載和配置,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • Vue開發(fā)過程中遇到的疑惑知識點總結(jié)

    Vue開發(fā)過程中遇到的疑惑知識點總結(jié)

    vue是法語中視圖的意思,Vue.js是一個輕巧、高性能、可組件化的MVVM庫,同時擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開發(fā)過程中遇到的疑惑知識點,有需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-01-01
  • Vue cli3 庫模式搭建組件庫并發(fā)布到 npm的流程

    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用法

    這篇文章主要介紹了vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友參考下吧
    2018-08-08
  • vue3中引入class類的寫法代碼示例

    vue3中引入class類的寫法代碼示例

    最近一直在做vue項目,從網(wǎng)上搜索到的資料不太多,這篇文章主要給大家介紹了關(guān)于vue3中引入class類的寫法的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-05-05
  • VUE實現(xiàn)移動端列表篩選功能

    VUE實現(xiàn)移動端列表篩選功能

    這篇文章主要介紹了VUE實現(xiàn)移動端列表篩選功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • vue驗證碼組件使用方法詳解

    vue驗證碼組件使用方法詳解

    這篇文章主要為大家詳細介紹了vue驗證碼組件的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-07-07
  • 基于element-ui自定義封裝大文件上傳組件的案例分享

    基于element-ui自定義封裝大文件上傳組件的案例分享

    本文主要介紹了以element-ui基礎(chǔ)封裝大文件上傳的組件,包括斷點續(xù)傳,秒傳,上傳進度條,封裝思想邏輯來源于el-upload 組件源碼,文中有具體案例分享,需要的朋友可以參考下
    2024-01-01
  • Vue倒計時3秒后返回首頁Demo(推薦)

    Vue倒計時3秒后返回首頁Demo(推薦)

    這篇文章主要介紹了Vue倒計時3秒后返回首頁Demo,倒計時結(jié)束后要清除計時器,防止內(nèi)存泄漏,本文通過示例代碼給大家介紹的非常詳細,需要的朋友參考下吧
    2023-11-11
  • Vue生命周期深入分析總結(jié)

    Vue生命周期深入分析總結(jié)

    Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new?Vue()?開始就是vue生命周期的開始。Vue?實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom?->?渲染、更新?->?渲染、卸載?等?系列過程,稱這是Vue的?命周期
    2022-08-08

最新評論