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

这篇文章主要介绍了Vue实现靠边悬浮球(PC端)效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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

实现是这个样子:

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

Vue实现PC端靠边悬浮球的代码 (https://www.wp-admin.cn/) javascript教程 第1张

Vue实现PC端靠边悬浮球的代码 (https://www.wp-admin.cn/) javascript教程 第2张

嗯,具体代码:

<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端靠边悬浮球的代码 (https://www.wp-admin.cn/) javascript教程 第3张

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-06-20 14:03:28
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[加我微信]
chaoneo
注:点击复制微信号并打开微信APP,添加好友后进行聊天。
[电话联系]
13585372227
[电子邮件]
chaoneo@163.com
取消

选择聊天工具: