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

首页课程实战体系课手记专栏慕课教程

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

来源：7-5 搜索框动画效果实现

console_man

2019-04-17

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

写回答

2回答

Dell

Dell

2019-04-18

已采纳

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

1

1

console_man

非常感谢！

2019-04-18

共1条回复

裴珞嘉

裴珞嘉

2019-07-12

//img1.sycdn.imooc.com/szimg/5d280f4e09d0025704040805.jpg

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

0

1

27网络

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

2020-02-12

共1条回复

React零基础入门到实战，完成企业级项目简书网站开发

主流新技术 React-redux，React-router4，贯穿基础语法

5275 学习 · 2496 问题

相似问题

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

回答 1

搜索框动画不成功

回答 3

请问老师，我使用antd构建的页面布局，为什么使用CSSTransiton实现动画效果无效呢？

回答 1

老师，这章视频CSSTransition位置直接在NavSearch上写一个transition不好吗？

回答 1

使用CSSTransition 就报错了

回答 2

打开慕课网App查看更多内容