HTML|HTML 向右侧展开div java|开发语言|xml

> .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; } > 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 = '显示更多' }}

注意 【HTML|HTML 向右侧展开div】偶尔可能会遇到动画会把按钮挡住，导致按钮不可以点击，就要添加这个属性 pointer-events

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

pointer-events属性本身有很多取值，但**只有****none和auto**可以用在浏览器上，其他都只能应用在SVG上
取值none：元素永远不会成为鼠标事件的target
取值auto：与pointer-events属性未指定时的表现效果相同（即将元素恢复成为鼠标事件的target）
这里不要忘了给内层添加**auto属性，否则被外层包裹的所有内层无法成为鼠标事件的target**了
详解链接