css transition 问题请教

2021-11-12 09:54:01 +08:00
 zxCoder
.test{
    transition: width 1s;
    &:hover{
      width: 400px;
    }
  }
  
  
<input type="text"  class="test"/>

怎么让过渡效果起作用呢

730 次点击
所在节点    问与答
4 条回复
otakustay
2021-11-12 09:59:18 +08:00
width 默认是 auto ，但 transition 无法基于 auto 搞，用 min-width 搞 0-400 的 transition 的话会有“启动延时感”，你要的这个功能我理解是无法用纯 CSS 完美实现的
otakustay
2021-11-12 09:59:40 +08:00
<!DOCTYPE html>
<html>
<head>
<style>
.test{
transition: min-width 1s linear;
min-width: 0;
}

.test:hover{
min-width: 400px;
}
</style>
</head>

<input type="text" class="test"/>
</html>

这个是 min-width 的做法，会有一个延迟（从 0 到当前 width 的过程看不到）
icedwatermelon
2021-11-12 10:06:11 +08:00
`
.test-wrapper{
transition: width 1s;
width:100px;
&:hover{
width: 400px;
}
.test
}


<div class="test-wrapper">
<input type="text" class="test"/>
</div>

`
icedwatermelon
2021-11-12 10:07:36 +08:00
@icedwatermelon
.test-wrapper{
transition: width 1s;
width:100px;
&:hover{
width: 400px;
}
.test{
width:100%
}


<div class="test-wrapper">
<input type="text" class="test"/>
</div>
在外面包一个 div 好像可以

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/814849

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX