仅修改框阴影时的跳跃过渡，使用框阴影+边框看起来不错

Question

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

第一个示例使用底部边框和框阴影的组合来实现效果。第二个示例仅使用框阴影。我认为效果应该是相同的。但是，仅框阴影示例在完成过渡时会"跳跃"。为什么？有没有办法改进它？

示例仅在 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

Answer 2

    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);
      transition: box-shadow .1s;
    }
    #example2:focus {
      box-shadow: inset 0 -2px 0 #2196F3;
      transition: box-shadow .4s;
    }

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