仅修改box-shadow时跳转过渡,使用box-shadow + border看起来很好

Question

以下代码段显示了文本输入字段的两个示例.聚焦时,输入的底部厚度增加并改变颜色.

第一个示例使用border-bottom和box-shadow的组合来实现效果.第二个例子只使用box-shadow.我认为效果应该是相同的.但是,只有box-shadow示例在完成转换时才会"跳转".为什么？有没有办法改善它？

示例仅在Webkit的稳定版本上进行了测试.

input[type="text"] {
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 0 0 8px 0;
  transition: box-shadow 0.3s, border 0.3s;
  will-change: box-shadow, border;
  outline: none;
  box-sizing: border-box;
}
#example1 {
  border-bottom-width: 1px;
  border-bottom-color: rgba(0, 0, 0, 0.26);
}
#example1:focus {
  border-bottom-color: #2196F3;
  box-shadow: inset 0 -1px 0 #2196F3;
}
#example2 {
  border-bottom: none;
  padding-bottom: 9px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .26);
}
#example2:focus {
  box-shadow: inset 0 -2px 0 #2196F3;
}

<input type="text" id="example1" placeholder="I'm a good example">
<input type="text" id="example2" placeholder="I'm a bad example">

Answer 1

当我运行它时看起来很好，而且我在 Chrome 上。

您应该做的第一件事是确保您拥有最新的浏览器：过渡仅在几个版本之前才被普遍采用。

其次，过渡并不是对每个元素都完美地起作用，或者对某些元素根本不起作用。

使用这个很棒的工具来检查您尝试设置动画的元素的兼容性：

http://caniuse.com/#feat=css-transitions