属性了解
pointer-events
none:该元素永远不会成为鼠标事件的 target。但是,当其后代元素的 pointer-events 属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器 (鼠标的动作将不能被该元素及其子元素所捕获,但是能够被其父元素所捕获)。
auto:默认值,表示指针事件已启用;此时元素会响应指针事件,阻止这些事件在其下面的元素上触发。对于 SVG 内容,该值与 visiblePainted 效果相同。
inherit:将使用 pointer-events 元素的父级的值。
animation
CSS3 animation(动画) 属性
伪类:active
CSS :active 选择器
实现
<button onclick="console.log('保存了')">保存</button>
先写一个动画实现从禁用到可点击的变化:
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
然后将动画绑定到按钮上:
button{
animation: throttle 2s step-end forwards;
}
点击时候将动画清空,点击后动画开始:
button:active{
animation: none;
}
可以在动画中加上提示色,表示禁用:
@keyframes throttle {
from {
color: red;
pointer-events: none;
}
to {
pointer-events: all;
}
}