巧妙利用flex, 实现下面的效果~ 无需js来获取clientWidth
0.gif
有时候会做一些小的宽度变换, 比如居中到居左的变换, 例如上面的搜索的placeholder
我之前试过4种居中到居左的切换
0. width + text-align:center;
1. position:absolute; left + right 的拉伸;
2. justify-content: center/flex-start;
3. display:inlne-block + text-align:center;
4. margin: 0 auto 的切换;
大概知道方式的, 就不细写了~
其中0是有transition动画的, 但是with的值需要js生成, 其他4种配合transition都没有效果
后来想到flex还有一种居中效果的实现, 需要3个元素来配合~
2017-10-28_095141.png
就是前面一个前后各放置个空元素设置即可, 居中的设置为flex: 0 0 auto;, 那么这个空元素就使用父级的::before/::after 伪元素来实现了~
这样设置transition是生效的~
2017-10-28_095528.png
很简答~ 下一环节~
那么flex什么时候配合transition是没有动画的捏?
1.gif
flex: 0 0 auto; 到flex: 0 0 0px;是没有动画的直接跳过的
那么如何是实现这个过程有动画捏?
思路很简单: 那么改变容器的with没有动画, 那么所以就是改变所撑开容器的东西咯
容器里面的是字体, 改变字体大小就可以了~ 但是...
2.gif
不连贯... 从5px的时候之后就不能的字体都是一样大小的了... 相当于5px跳到0px
还有什么可以改变容器宽度? 答案是letter-spacing
3.gif
这样就可以连贯的改变实现flex: 0 0 auto; 到flex: 0 0 0px;
但是, 这个有缺陷么? 有~
中文的字是一个letter , 英文的字母也是一个letter , 它们的字宽不同....
4.gif
所以导致, 英文使用-9px 和中文-17px的有效过渡时间是一致的, 但是当英文使用-17px的时候, 会加速收缩, 延迟展开
并且如果是中英混搭的情况, 过渡时间由中英分别的字母数决定...就是动画时间不可控 , 它带来的好处就是不需要js来设置, 所以使用场景也是有限的~
最后 flex宽度改变了, 需要的效果是, 向右移出, 怎么来实现?
<div class="btn-cancel" @click="_cancel">
<span class="btn-cancel-container">{{cancelBtnText}}</span>
<div class="btn-cancel-takeplace">{{cancelBtnText}}</div>
</div>分出两个容器, 一个用来控制父级的宽度, 一个用于显示最初的状态
2017-10-28_104106.png
OK~ 昨天制作这个效果的关键点就是这些~ 在这里记录一下下~
btw, 这类改变width的局部小范围弄弄就好, 可以在组件的root添加will-change: opacity; ,减少一下paint的范围
2017-10-28_104641.png
下面是不加的效果
2017-10-28_104808.png
当然, 现在的大头是layout, 我还不知道如何控制layout的范围~ 如果有读者知道可以评论一下下~
作者：DeepKolos
链接：https://www.jianshu.com/p/3622019255e4