Question

我正在使用以下样式作为简单的输入文本框，我希望虚线边框在焦点上动画为实体，反之亦然。

        input {
            font-family: inherit;
            font-size: large;
            border: 2px solid #1bd55a;
            border-radius: 5px;
        }
        input[type=text] {
            width: 500px;
            height: 30px;
            color: #616161;
            padding-left: 6px;
            border-style: dashed;
            background-color: rgba(27, 213, 90, 0.12);
            transition: 0.3s;
        }
        input[type=text]:focus {
            border-style: solid;
            outline: none; /* gets rid of the blue outline. */
        }

然而，对于当前代码，破折号和实体之间的过渡是立即的，那里没有动画。我正在设置单个属性的动画，我知道可以使用svg的stroke属性来完成这项工作，那么如何将其正确应用于文本输入呢？

Answer 1

不幸的是，border-style不是一个可动画的属性。但是，您可以通过一些额外的标记和边框颜色来实现效果。

   input {
          font-family: inherit;
          font-size: large;
          border: 2px solid #1bd55a;
          border-radius: 5px;
      }
      input[type=text] {
          width: 500px;
          height: 30px;
          color: #616161;
          padding-left: 6px;
          background-color: rgba(27, 213, 90, 0.12);
          border-color: rgba(27, 213, 90, 0.12);
          transition: 0.3s;
          margin: -2px;
      }
      input[type=text]:focus {
          border-color: #1bd55a;
          outline: none; /* gets rid of the blue outline. */
      }

      div.extra-border {
        display: inline-block;
        border: 2px dashed #1bd55a;
        border-radius: 5px;
      }

    <div class="extra-border">
      <input type="text" placeholder="text here" />
    </div>

这是fiddle。与svg给你的过渡并不完全相同，但也不错。

Answer 2

根据这个： https://www.w3schools.com/cssref/pr_border-style.asp

border-style属性不可动画。

输入[type = text]转换延迟无效

2 个答案: