[小技巧]巧妙使用flex, letter-spacing实现过渡动画

巧妙利用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