关于此节动画使用CSSTransition的疑问

Question

老师，针对此节视频中的输入框的动画效果，个人感觉老师是为了使用CSSTransition而使用CSSTransition，这样做反而过于复杂。
如果老师是为了让我们复习一遍CSSTransition的使用方式的话，那可能就是我多虑了。
实际上可以只利用input元素的 :focus 伪类就能达到和视频中同样的效果。
嘿嘿，只是一个小小的建议哈。

Answer 1

Dell 2019-04-18 00:03:20

是滴，这节课主要为了用上CSSTransition， 实际上用css就可以解决这个动画的

• 提问者 console_man #1

  非常感谢！

Answer 2

裴珞嘉 2019-07-12 12:41:55

用:focus 我只能做到width的缓动动画 那这个zoom和input 怎么能联动呢

• 27网络 #1

  用相邻兄弟选择器可以的。
  
  &:focus {
      width: 320px;
  
      &+.iconfont {
        background-color: #969696;
        color: #fff;
      }
    }