CSS - 如何确定转换的方向？

Question

我正在使用div的下一个CSS规则

    transition-property:  width;
    transition-duration: 0.2s;
    transition-timing-function: linear;

事情是，目前的行为是过渡方向从右向左。

无论如何，转换是相反的，意味着从左到右？ 感谢您提供任何帮助

Answer 1

转换仅适用于查询选择的元素。所以如果你有这个html：

<div>sdlfkj</div>

这个css（ WRONG ）：

div{
  width:100px;
}
div:hover{
  width:200px;
  transition: width 2s;
}

只有悬停元素时，转换才有效。如果您取消隐藏元素，不，因为没有:unhover！如果您希望在取消悬停元素的同时进行转换，则需要将转换放置到将在未展开状态下选择的元素。

使用此（ RIGHT ）：

div{
  width:100px;
  transition: width 2s;
}
div:hover{
  width:200px;
}