Question

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

第一个示例使用border-bottom和box-shadow的组合来实现效果。第二个例子只使用box-shadow。我认为效果应该是相同的。但是，只有框阴影的例子才能跳过＆＃39;完成过渡时。为什么？有没有办法改善它？

示例仅在稳定版Webkit上进行了测试。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: