css里transition不支持height为自适应的解决思路
关于这个focus-within
之前这期视频有分享过哈
今天呢用它来做了一个这样的效果
大家看！当它点击的时候
下面展开，思路是这样的
很简单
就是默认呢外边先套一个大的Div
比如说这个红色的
它高度是动态的
高度取决于什么呢
首先它里边还有一个文本框
这个是用来输入的
然后呢
还有一个就是下边这部分提示的内容
他默认呢高度是
然后当文本框获取焦点了
（对于外层来说他就focus-within了嘛）
然后呢就会让这一部分的高度
恢复到一个自动的高度
那现在遇到一个什么问题呢
大家看！我想让他加一个动画过度
比如说
我想给这个height加一个动画过渡
比如说0.3秒
大家看 不起作用
为什么呢
就是因为这用了auto
如果我们这改成一个固定值比如说
大家看 它就可以了
但是呢我不想让它固定
因为里边的内容是不固定的
所以呢我就上网查了一下
这个height虽然不行
但是呢我们可以用max-height
我把它改成max-height
max-height为
它默认也是隐藏的效果
所以呢这块也是
我们把focus-within之后把它改成max-height
然后这就可以不用200了
比如说我们用一个
大家看 就可以了！我把它内容再减少一点
然后超过50vh之后呢
这样就很好了
但是呢我又遇到了另一个问题
就是这里边要做点击事件
比如说我点这
他收起来没问题
但是问题是他有的时候他收的太快
这个点击事件（里面）接受不到
因为啊
我鼠标按下的时候他就失去焦点了
大家看 所以很快
我们可以在这试一下
我先把它写少一点
然后呢我们在这写一个
onclick事件
然后呢console.log
我们在这里边写一个序号吧
1234678910 然后我们再来试一下啊
大家看：
打击看：这次就没收到
有的时候就收不到事件
那怎么办呢
我们就要想办法
让他展开的条件变一下
我们可以这样我们在这
加一个条件
focus-within 代表他文本框是获取焦点了
然后呢我们再加一个hover
让下边的内容鼠标移入的时候
也是保持展开的状态，我们再来试一下
2、4 大家看 就已经没有问题了
然后鼠标移出它自动就关掉了
再移入点击展开再点
这样就解决了
最后更新于