可以使用 :after 和 :focus 之间的过渡进行动画处理

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
    }
}

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

Answer 1

你在问题标题中提问的方式并没有真正的意义 - :after元素不能像:focus一样处于状态，所以也没有"在它们之间切换"。

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

你真正想要的是，当实际元素处于:focus状态时，给:after创建的伪元素一个不同的不透明度 - 所以你只需要这样做：把&:focus放在&:after{ ...}里面，这样最终的选择器就会变得.input-container:after:focus

不要担心顺序 - .input-container:focus:after看起来更合乎逻辑，毕竟"真实"元素处于焦点状态，而不是伪元素 - 但顺序在这里无关紧要，两者都实现相同。