【CSS】简单的抽屉面板展开收起自然过渡效果的css

目录

  • 效果展示
  • css
    • 固定梯形按钮至抽屉面板中间
    • 梯形按钮css
    • 过渡动画

效果展示

1.收起时点击蓝色梯形按钮展开
在这里插入图片描述
2. 展开时点击蓝色按钮收起
在这里插入图片描述
3.展开收起时需要过渡自然,有抽屉推拉效果

css

固定梯形按钮至抽屉面板中间

.toggle{ position: absolute;left:-21px;top:0;bottom:0;margin: auto 0;z-index:100;width: 15px;height: 59px;line-height: 40px;color:#fff;font-size:14px;text-align: right;cursor:pointer;padding-left: 6px;.showInfo { font-size: 11px;margin-top: 23px;}.hiddenInfo {font-size: 11px;transform: rotate(180deg);margin-top:23px;}
}

梯形按钮css

.toggle::before {content: '';position: absolute;top:0;left:0;right:0;bottom:8;z-index:-1;background:#000;background-color:#47e4ee;color:#FFFFFF;border: 1px solid #47e4ee;-webkit-transform: perspective(0.3em)rotateY(-5deg)translateX(2.38px);
}

过渡动画

.task_status {/* 这里写抽屉面板样式*/.common(250px);transition:width 0.5s;
.task_status_hidden {/* 这里写抽屉面板样式*/.common(0px);transition:width 0.5s;
}
<div className={isShowInfo ? styles.task_status : styles.task_status_hidden}><div className={styles.toggle} οnclick={()=>this.setstate({ isshowInfo: !isshowInfo })}><Icon type="double-right" className={isShowInfo ? styles.showInfo : styles.hiddenInfo} /></div>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/271327.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

能换发型的相机app有哪些?5款APP帮你一键换发型

能换发型的相机app有哪些&#xff1f;在当前的数字化时代&#xff0c;发型变换不再受限于传统理发店的繁琐流程。只需一款合适的相机app&#xff0c;便能轻松尝试各种新颖发型。这些app凭借先进的图像处理技术&#xff0c;将发型与用户的照片精准融合&#xff0c;实现逼真的换发…

“空气清新剂”成网红!6.29美金,单周热销近5万单!

草莽时期的“造富神话”或许不再&#xff0c;但TikTok电商仍然生机勃勃&#xff0c;新的爆款、新的营销还在出现。 鉴于美国汽车保有量的增长&#xff0c;车内装饰和汽车用品的需求也相应上升&#xff0c;而TikTok在这一趋势中扮演着至关重要的引导角色&#xff0c;越来越多[汽…

HUAWEI Pocket 2说的防晒检测,能做到什么程度?

防晒是必须&#xff0c;还是噱头&#xff1f;我们来看一下经典案例&#xff1a; 《新英格兰医学杂志》调查一名69岁的卡车司机发现&#xff0c;他位于车窗侧、遭受更多阳光直晒的左半边脸&#xff0c;无论是皱纹还是皮肤厚度&#xff0c;都要比远离阳光的右半边脸要严重得多&am…

【数据结构】栈和队列的应用——括号匹配 + 表达式求值 + 表达式转换 +栈的递归应用+队列在计算机系统中的应用

文章目录 3.栈的应用3.1 括号匹配问题3.2 表达式求值3.2.1 三种算术表达式3.2.2 后缀表达式A.中缀转后缀B.后缀表达式的计算 3.2.3 前缀表达式A.中缀转前缀B.前缀表达式的计算 3.2.4 中缀表达式的求值 3.3 递归中栈的应用 4.队列的应用 栈基础知识&#xff1a;【数据结构】栈 顺…

图机器学习(3)-连接层面的特征工程

0 问题定义 通过已经连接去猜未知连接&#xff1a; 有两个思路&#xff1a;

CentOS下安装RabbitMQ

准备工作&#xff0c;更新yum源 正式环境慎用 yum update -y # 进入目录 cd /etc/yum.repos.d/ # 创建目录 mkdir backup # 默认源配备份 mv C* backup/ # 下载阿里云yum源 wget -O /etc/yum.repos.d/CenOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo # 清除旧…

【操作系统概念】 第7章:死锁

文章目录 0.前言7.1 系统模型7.2 死锁特征7.2.1 必要条件7.2.2 资源分配图 7.3 死锁处理方法7.4 死锁预防&#xff08;deadlock prevention&#xff09;7.4.1 互斥7.4.2 占有并等待7.4.3 非抢占7.4.4 循环等待 7.5 死锁避免&#xff08;deadlock-avoidance&#xff09;7.5.1 安…

docker离线搭建仓库

要在Docker中搭建本地仓库&#xff0c;可以按照以下步骤进行操作&#xff1a; 首先安装 Docker。根据不同的操作系统选择合适的版本并完成安装过程。打开命令行工具&#xff08;如Terminal或PowerShell&#xff09;&#xff0c;运行以下命令来创建一个新的容器并将其设置为本地…

牛客网 华为机试 坐标移动

本题是需要将输入的字符串&#xff0c;得到移动位置的信息&#xff0c;同时要判断移动信息的合法性。 所以我们可以考虑先通过正则表达式过滤得到正确的字符串。 正确的字符串应该以ADWS其中一个字母开头&#xff0c;然后后面接着1个或者2个&#xff08;0-9&#xff09;的数字。…

如何在小程序中绑定身份证

在小程序中绑定身份证信息是一项常见的需求&#xff0c;特别是在需要进行实名认证或者身份验证的场景下。通过绑定身份证信息&#xff0c;可以提高用户身份的真实性和安全性&#xff0c;同时也为小程序提供了更多的个性化服务和功能。下面就介绍一下怎么在小程序中绑定居民身份…

LVGL在VScode中安装模拟器运行配置笔记教程

1、LVGL模拟器工程搭建 LVGL(Light and Versatile Graphics Library,轻巧而多功能的图形库)是一个免费的开放源代码图形库,它提供创建具有易于使用的图形元素,精美的视觉效果和低内存占用的嵌入式GUI所需的一切。本文主要讲述如何实现在VScode中实现LVGL模拟器环境的搭建运行。…

element组件使用教程

首先在终端输入 npm i element-ui -S 下载完成后如何使用呢 在main.js文件中导入组件以及需要使用 import Vue from vue import { Button, Form, FormItem, Input, Message, Container, Header, Aside, Main, Menu, Submenu, MenuItem, MenuItemGroup } from element-uiVue.…

如何学习、上手点云算法(三):用VsCode、Visual Studio来debug基于PCL、Open3D的代码

写在前面 本文内容 以PCL 1.14.0&#xff0c;Open3D0.14.1为例&#xff0c;对基于PCL、Open3D开发的代码进行源码debug&#xff1b; 如何学习、上手点云算法系列&#xff1a; 如何学习、上手点云算法(一)&#xff1a;点云基础 如何学习、上手点云算法(二)&#xff1a;点云处理相…

Java项目:41 springboot大学生入学审核系统的设计与实现010

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 本大学生入学审核系统管理员和学生。 管理员功能有个人中心&#xff0c;学生管理&#xff0c;学籍信息管理&#xff0c;入学办理管理等。 学…

WordPress建站入门教程:如何上传安装WordPress主题?

我们成功搭建WordPress网站后&#xff0c;默认使用的是自带的最新主题&#xff0c;但是这个是国外主题&#xff0c;可能会引用一些国外的资源文件&#xff0c;所以为了让我们的WordPress网站访问速度更快&#xff0c;强烈建议大家使用国产优秀的WordPress主题。 今天boke112百…

【C++】学习记录

一、第一个C程序 #include<iostream> using namespace std;int main() {cout << "Hello World!";return 0; } 二、数据类型、变量与常量、运算符 2.1 数据类型 2.2 变量与常量 2.3 运算符 三 、判断语句&#xff08;if-else、switch-case&#xff09; …

蓝桥杯物联网竞赛_STM32L071_11_知识体系的查漏与补缺

太久没学单片机了&#xff0c;再重新过一遍查漏补缺&#xff0c;对其中之前没怎么在意的&#xff0c;而现在又发觉的问题进行再分析与补充 1. debug serial wire是干什么用的 这个东西我勾选不勾选都对我的程序没有什么影响&#xff0c;我很好奇是干什么用的&#xff0c;网上查…

《Ubuntu20.04环境下的ROS进阶学习1》

一、vscode和超级终端Terminator 在上节我们已经逛了逛ROS官方应用商店和全球最大开源平台github。为了方便阅读代码和启动程序&#xff0c;本节我们来下载两个好用的app&#xff0c;当然是在Ubuntu上。 二、下载安装并运行vscode 1、下载vscode安装包 这里为了方便我们直接打…

职工医疗报销管理系统

目录 1 系统目标与范围说明... 0 1.1项目名称... 0 1.2问题说明... 0 1.3项目目标... 0 1.4项目范围... 0 1.5初步想法... 0 1.6可行性研究计划... 0 2 可行性分析报告... 1 2.1系统概述... 1 2.2可行性分析... 2 2.3结论意见... 2 3 项目开发计划... 2 3.1系统…

【电路笔记】-NPN晶体管

NPN晶体管 文章目录 NPN晶体管1、概述2、双极NPN晶体管配置3、NPN晶体管中的α和β关系4、示例5、共发射极配置1、概述 NPN 晶体管是三端三层器件,可用作放大器或电子开关。 在前面的文章中,我们看到标准双极晶体管或 BJT 有两种基本形式。 NPN(负-正-负)配置和PNP(正-负…