- 锐客网
>
.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
**了详解链接
推荐阅读
- 我想谈一谈外包,请不要“妖魔化”它。
- Java基础|10 继承、super、this、抽象类
- java|java-继承,super关键字,this关键字,抽象方法和抽象类,红包案例分析实现
- java|Spring Boot + Vue 如此强大(你可能想不到的功能!)
- springboot|真叼!你兼顾欧腾讯技术官分享的这份Springboot笔记吗(全到你怀疑人生······)
- 程序员|2021年Java开发实战!java开发常用linux命令
- 程序员|2021吊打面试官系列!mysql去重查询方法优化
- 学习|用Java代码对字符串进行切割,这么写性能提升两倍
- java|什么是 Null Pointer Exceptions (java.lang.NullPointerException) ,是什么原因造成的?