<html>
<head><meta charset="utf-8"><title></title><style>.userpic {position: relative;}.userinfo {position: absolute;z-index: 99;left: 0;top: 0;}@keyframes go-left {0% {/* 背景色 */background: #000000;/* 距离左侧高度 */left: 0;/* 距离顶部高度 */top: 20px;/* 元素的不透明级别 */opacity: 0}100% {background: #000000;left: calc(50% + 20px);top: 20px;opacity: 3;}}@keyframes go-right {0% {background: #000000;left: calc(50% + 20px);top: 20px;opacity: 3}100% {background: #000000;left: 0;top: 20px;opacity: 0;}}/* Safari and Chrome *//* @-webkit-keyframes go-left {0% {background: #000000;left: 0;top:  calc(10vh + 20px);opacity: 0}100% {background: #000000;left: calc(50% + 20px);;top: calc(10vh + 20px);opacity: 3;}}@-webkit-keyframes go-right {0% {background: #000000;left: calc(50% + 20px);top: calc(10vh + 20px);opacity: 0}100% {background: #000000;left: 0;top: calc(10vh + 20px);opacity: 3;}} */.go_left {/* 属性为 @keyframes 动画规定名称 */animation-name: go-left;animation: myfirst 1s normal;animation-direction: normal;animation-fill-mode: forwards;/* Safari and Chrome */-webkit-animation-name: go-left;-webkit-animation: go-left 3s normal;-webkit-animation-direction: normal;-webkit-animation-fill-mode: forwards;}.go_right {pointer-events: none;animation-name: go-right;animation: myfirst 3s normal;animation-direction: normal;animation-fill-mode: forwards;-webkit-animation-name: go-right;-webkit-animation: go-right 3s normal;-webkit-animation-direction: normal;-webkit-animation-fill-mode: forwards;}.go_display {pointer-events: none;animation-name: go-right;animation: myfirst 3s normal;animation-direction: normal;animation-fill-mode: forwards;-webkit-animation-name: go-right;-webkit-animation: go-right 1s normal;-webkit-animation-direction: normal;-webkit-animation-fill-mode: forwards;}</style>
</head><body><!-- <button id="btn" οnclick="fadeIn()" style="height: calc(10%);width: 10vw;">显示更多</button> --><div style="width: calc(100%-40px); height: calc(100%-40px);margin: 20px;background-color: #0050fc;display: flex;"><div class="userpic" style="width: 50vw; height: 50vh; background-color: #ff4a0d;" ><button id="btn" onclick="fadeIn()" style="height: calc(10%);width: 10vw;">显示更多</button></div><div class="userinfo sidebar go_display" style="width: 30vw; height: 50vh;" ></div></div><script>function fadeIn() {if (document.querySelector(".sidebar").className.indexOf('go_left') < 0) {document.querySelector(".sidebar").className = 'userinfo sidebar';document.querySelector(".sidebar").classList.add('go_left');document.getElementById("btn").innerText = '收起'} else {document.querySelector(".sidebar").className = 'userinfo sidebar';document.querySelector(".sidebar").classList.add('go_right');document.getElementById("btn").innerText = '显示更多'}}
</script>
</body></html>

注意

偶尔可能会遇到动画会把按钮挡住，导致按钮不可以点击，就要添加这个属性 pointer-events

外层（被遮挡的层）{pointer-events: none;
}内层（要发生事件的层）{pointer-events: auto;
}

pointer-events属性本身有很多取值，但**只有****none和auto**可以用在浏览器上，其他都只能应用在SVG上

取值none：元素永远不会成为鼠标事件的target

取值auto：与pointer-events属性未指定时的表现效果相同（即将元素恢复成为鼠标事件的target）

这里不要忘了给内层添加**auto属性，否则被外层包裹的所有内层无法成为鼠标事件的target**了

详解链接

HTML ===＞向右侧展开div相关推荐

CSS如何动态下拉div盒子、移动div盒子和展开div盒子
前言:css是层叠样式表,是一种用于网页设计的语言,它可以为HTML和XML文档添加样式和布局.我们通过css可以控制文本的颜色.字体大小.字体间距等等.css是强大的工具,它可以使我们的网页更加的美 ...
HTML如何在按钮右侧显示div,如何实现点击页面中的一个按钮相应位置的div显示隐藏？...
这个可以通过给按钮点击事件传参来完成,下面是一个小例子 html 点击1 1 点击2 2 点击3 3 点击4 4 点击5 5 css .one{ width: 100px; height: 20px; ...
element ui 菜单右侧展开_Elementui Vue 菜单固定展开的问题
父组件 :default-active="activeMenu" class="el-menu-vertical-demo" background-color= ...
html折叠div,纯CSS折叠/展开div
我有一个纯CSS可折叠div,它是基于别人的代码,使用:target伪造类.我想设置的是一个有12个问题的页面,当你点击按钮,答案div扩展下面.我不知道如何使多个折叠div元素在这个页面上,没有编写 ...
【JS】实现拖动div右侧改变,改变div宽度 /及拖动div的整理
先看看效果吧. [拖动右侧改变div的宽度] 一开始也挺蒙的,不晓得思路,我就思考,先是获取到右侧的边缘->触发事件->拖动-->改变宽度; 然后都不晓得怎么实现.我发挥面向百度 ...
超轻量级三级展开列表
这几天在公司的通用管理后台,使用的左右框架结构,点击左侧,右侧展开内容,项目中经常遇到左侧二级或者三级的情况,以前都是使用dtree,但是发现dtree ,样式及结构上不好控制 , 如果是动态的数据, ...
CSS+div布局总结（快速入门，附代码）
文章目录定位相对定位绝对定位固定定位堆叠顺序 display 预备知识: 块状&行内元素的互换: 隐藏元素: 设置透明度: 盒子模型预备知识: margin 快速设置: 居中显示: ...
帖子浏览定位展开、收起标签js部分思路及代码
界面设计类似于贴吧,前端框架用的是bootstrap,设计思路是在主界面搜索去找到某个主题的社区时,点击弹出模态框,模态框内加载该社区内的帖子和社区内其他功能部分,和贴吧不同的是,贴吧的每一个帖子需要 ...
layui的数据表格展开
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name=&q ...

HTML ===＞向右侧展开div

注意

HTML ===＞向右侧展开div相关推荐

最新文章

热门文章

HTML ===＞ 向右侧展开div

注意

HTML ===＞ 向右侧展开div相关推荐

最新文章

热门文章

HTML ===＞向右侧展开div

HTML ===＞向右侧展开div相关推荐