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

Vue實(shí)現(xiàn)PC端靠邊懸浮球的代碼

 更新時(shí)間:2020年05月09日 08:45:10   作者:意必固我  
這篇文章主要介紹了Vue實(shí)現(xiàn)靠邊懸浮球(PC端)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

我想把退出登錄的按鈕做成一個(gè)懸浮球的樣子,帶動(dòng)畫的那種。

實(shí)現(xiàn)是這個(gè)樣子:

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

嗯,具體代碼:

<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實(shí)現(xiàn)PC端靠邊懸浮球的代碼的文章就介紹到這了,更多相關(guān)Vue靠邊懸浮球內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

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

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

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

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

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

    Vue cli3 庫(kù)模式搭建組件庫(kù)并發(fā)布到 npm的流程

    這篇文章主要介紹了Vue cli3 庫(kù)模式搭建組件庫(kù)并發(fā)布到 npm,以下一個(gè)簡(jiǎn)單的顏色選擇器插件 vColorPicker 講述從開發(fā)到上線到npm的流程,需要的朋友可以參考下
    2018-10-10
  • 實(shí)例詳解vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法

    實(shí)例詳解vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法

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

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

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

    VUE實(shí)現(xiàn)移動(dòng)端列表篩選功能

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

    vue驗(yàn)證碼組件使用方法詳解

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

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

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

    Vue倒計(jì)時(shí)3秒后返回首頁(yè)Demo(推薦)

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

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

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

最新評(píng)論