css transition实现边框动画效果

1. 动画从边框底部中间开始，向两边延伸，代码如下，

<template>
  <div class="hello">
    <div :class="css.aaa">
      <input type="text">
    </div>

  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style module='css' lang="less">
.aaa {
  position: relative;
  width: 200px;
  height: 100px;
  background: red;
  padding: 0px;
  &:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 0;
    height: 0;
    border-bottom: 2px solid transparent;
    transition: 800ms ease-out;
  }
  &:focus-within {
    background: #000;
    &:after {
      width: 100%;
      left: 0;
      border-bottom-width: 2px;
      border-bottom-color: blue;
    }
  }
}
</style>

关键部分：

focus-within   伪类:如果元素里面的元素聚焦了，就会有这个伪类