是否可以使用之间的过渡动​​画：之后和：焦点？

Question

.input-container {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    border: solid 2px $light;
    border-radius: 2em;
    margin-bottom: 1.5625em;


    &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 20px white;
        border-radius: 2em;
        pointer-events: none;
        opacity: 0; //animate this
        transition: opacity 1s; // using this
    }

    &:focus{
        opacity: 1; //to this
    }
}

通常，transition用于在选择器及其伪类之间进行动画处理。我正在尝试使用不透明度为box-shadow属性设置动画，因为如果我使用Transition直接为其设置动画，它会杀死性能，因此我需要从一个伪类动画到另一个伪类。是否可以仅使用CSS来实现这一目标？

Answer 1

你在问题​​标题中提问的方式并不合理 - true不是状态元素可以像:after一样，所以没有“他们之间切换”。

（:focus / ::before通常被称为伪元素，而不是类。为了使它们与实际的伪类之间的区别更加明显，语法具有已更新，以便这些现在使用双冒号 - 可选，你仍然可以使用“旧”单冒号语法。）

你真正想要的是，当实际元素处于::after状态时，为:after创建的伪元素赋予不同的不透明度 - 所以你只需要这样做：将:focus 放在 &:focus内，以便最终选择器变为&:after{ ...}

不要担心顺序 - .input-container:after:focus似乎更合乎逻辑，在所有“真实”元素处于焦点状态后，而不是伪元素 - 但顺序无关紧要，两者都实现相同