css - 直接在伪类中设置过渡属性是不好的做法吗？

Question

最佳做法是什么？为什么？这两种情况有区别吗？

1.

a {
    transition: color 325ms;
}

a:hover {
    color: red;
}

2.

a:hover {
    transition: color 325ms;
    color: red;
}

Answer 1

这不是坏习惯，视情况而定。如果你把 transition在伪class , 只有当你将鼠标放在元素上时才会发生过渡，而如果你把 transition在基本选择器本身上，它将在鼠标悬停和鼠标移开时在元素上设置动画。

Demo (仅当您在悬停时声明 transition)

对比

Demo 2 (transition 在鼠标悬停 + 鼠标移出时)