vue 侧边悬浮_Vue实现PC端靠边悬浮球的代码

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

实现是这个样子：

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

嗯，具体代码：

:class="['meun-switch animated flex-row',uploadflag ? 'active rubberBand off' : 'leave jello']"

@mouseleave="uploadleave"

@mouseenter="uploadenter"

v-if="uploadShow"

@click.stop="logout"

data

uploadShow: false,

uploadflag: true,

js方法

uploadenter() {

this.uploadflag = true;

uploadleave() {

this.uploadflag = false;

uploadanimated() {

setTimeout(() => {

this.uploadShow = true;

setTimeout(() => {

this.uploadleave();

}, 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端靠边悬浮球的代码

本文地址: http://www.cppcns.com/wangluo/javascript/312665.html

vue 侧边悬浮_Vue实现PC端靠边悬浮球的代码相关推荐

vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...
Vue项目实战 —— 后台管理系统( pc端 ) 第三篇
前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第一篇 _0.活在风浪里 ...
Vue项目实战 —— 后台管理系统( pc端 ) 第一篇
前期回顾我只写注释 -- 让Ai写代码_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_0.活在风浪里的博客-CSDN博客https://b ...
vue 侧边悬浮_vue实现移动端悬浮窗效果
本文讲述,在使用VUE的移动端实现类似于iPhone的悬浮窗的效果. 相关知识点 touchstart当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕 ...
vue左侧悬浮_vue实现移动端悬浮窗效果
本文讲述,在使用VUE的移动端实现类似于iPhone的悬浮窗的效果. 相关知识点 touchstart当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕 ...
Vue学习第36天——PC端和移动端常用的Vue UI组件库
1.移动端常用UI组件库 ① Vant Vant 是有赞前端团队开源的移动端vue组件库,适用于手机端h5页面网址:https://vant-contrib.gitee.io/vant/#/zh-C ...
Vue/Nuxt框架开发的PC端网站兼容平板设备的
大家做项目的时候有没有遇到过一些不符合常理的开发需求,例如:开发的时候PC端和H5是两套站点,一般H5站点会适配平板设备,但是如果需要改成PC端适配平板呢:前期开发PC端没有考虑到PC端会有需要兼容平 ...
vue移动端获取定位_vue手机移动端城市定位和选择代码
特效详情: vue手机移动端城市定位和选择代码,默认获取我的当前所在城市定位,可自定义更换选择城市,带城市列表首字母导航功能.请在手机端查看演示,电脑端无法选择. js代码 var app = new ...
vue移动端页面调用手机拍照_vue实现PC端调用摄像头拍照、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式...
export default { () { return {} }, methods: { # // 压缩图片 and 旋转角度纠正下方代码 # 需要自行去掉个人只作为着色效果加上 compres ...

vue 侧边悬浮_Vue实现PC端靠边悬浮球的代码

vue 侧边悬浮_Vue实现PC端靠边悬浮球的代码相关推荐

最新文章

热门文章