我有使阴影变得可见的代码,但它不响应任何形式的出现/消失过渡。
有人可以帮忙吗?
实际应用的 CSS
.wrapper {
position: relative;
z-index: 0;
display: inline-block;
width: 100%;
transition: all 2s;
}
.wrapper.shadow:before {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
height: 10px;
box-shadow: inset 0px 10px 6px -3px rgba(252, 29, 0, 1);
pointer-events: none;
content: "";
opacity: 1;
transition: all 2s;
}
请看我的扩展代码here
最佳答案
伪元素一开始并不存在,所以你没有什么可以转换的。
用 opacity
或其他东西创建一个隐藏的默认状态,然后当它被打开时它应该淡入视野。
示例
.wrapper {
position: relative;
z-index: 0;
display: inline-block;
width: 100%;
transition: all 2s;
}
.wrapper:before {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
height: 10px;
box-shadow: inset 0px 10px 6px -3px rgba(252, 29, 0, 1);
content: "";
opacity: 0;
transition: all 2s;
}
.wrapper.shadow:before {
pointer-events: none;
opacity: 1;
}
关于javascript - 为什么我的 :before class transition at all? polymer 没有,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45280583/