当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue实现PC端靠边悬浮球的代码

Vue实现PC端靠边悬浮球的代码

2020年06月23日  | 移动技术网IT编程  | 我要评论

我想把退出登录的按钮做成一个悬浮球的样子，带动画的那种。

实现是这个样子：

手边没有球形图。随便找一个，功能这里演示的为单机悬浮球注销登录

嗯，具体代码：

<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靠边悬浮球内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网