Vue实现PC端靠边悬浮球的方法

这篇文章主要讲解了Vue实现PC端靠边悬浮球的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

防城港网站建设公司创新互联公司,防城港网站设计制作，有大型网站制作公司丰富经验。已为防城港近1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的防城港做网站的公司定做！

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

实现是这个样子：

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

Vue实现PC端靠边悬浮球的方法

嗯，具体代码：

<div
       :class="['meun-switch animated flex-row',uploadflag &#63; '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实现PC端靠边悬浮球的方法
文章分享：https://www.cdcxhl.com/article28/jicpjp.html

成都网站建设公司_创新互联，为您提供外贸建站、网页设计公司、网站设计公司、网站策划、网站改版、网站营销

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容