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

本文作者:IMWeb DeepKolos 原文出处:IMWeb社区 未经同意,禁止转载

巧妙利用flex, 实现下面的效果~ 无需js来获取clientWidth

有时候会做一些小的宽度变换, 比如居中到居左的变换, 例如上面的搜索的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个元素来配合~

就是前面一个前后各放置个空元素设置即可, 居中的设置为flex: 0 0 auto;, 那么这个空元素就使用父级的::before/::after 伪元素来实现了~

这样设置transition是生效的~

很简答~ 下一环节~

那么flex什么时候配合transition是没有动画的捏?

flex: 0 0 auto;flex: 0 0 0px;是没有动画的直接跳过的

那么如何是实现这个过程有动画捏?

思路很简单: 那么改变容器的with没有动画, 那么所以就是改变所撑开容器的东西

容器里面的是字体, 改变字体大小就可以了~ 但是...

不连贯... 从5px的时候之后就不能的字体都是一样大小的了... 相当于5px跳到0px

还有什么可以改变容器宽度? 答案是letter-spacing

这样就可以连贯的改变实现flex: 0 0 auto;flex: 0 0 0px;

但是, 这个有缺陷么? 有~

中文的字是一个letter , 英文的字母也是一个letter , 它们的字宽不同....

所以导致, 英文使用-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>

分出两个容器, 一个用来控制父级的宽度, 一个用于显示最初的状态

OK~ 昨天制作这个效果的关键点就是这些~ 在这里记录一下下~

btw, 这类改变width的局部小范围弄弄就好, 可以在组件的root添加will-change: opacity; ,减少一下paint的范围

下面是不加的效果

当然, 现在的大头是layout, 我还不知道如何控制layout的范围~ 如果有读者知道可以评论一下下~![]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

SVG之旅:SVG的图层和渲染顺序

不管是在制图软件中还是Web页面的DOM元素,都有层的概念。在制图软件中,大家比较熟悉,能非常的清晰的看出图层的概念。而在Web页面中,特别是我们熟悉的HTML...

4845
来自专栏PPV课数据科学社区

【高手捷径】Excel数据操作与处理

作者:聂春霞,2001年毕业于南京邮电大学,在中国移动通信集团江西有限公司工作近4年,2005年加入腾讯公司,现就职于腾讯公司MIG运营商业务部,专注数据分析岗...

3779
来自专栏腾讯大讲堂的专栏

Excel数据操作与处理

作者:聂春霞,2001年毕业于南京邮电大学,在中国移动通信集团江西有限公司工作近4年,2005年加入腾讯公司,现就职于腾讯公司MIG运营商业务部,专注数据分析岗...

2037
来自专栏游戏杂谈

快速找到自己想要用到的cocos2d-x的缓冲动画

游戏中在做很多动画时,需要用到缓冲来增强表现。比如宝箱“鼓”几下,然后“蹦”的一下打开。很多时候要调效果时,需要轮着试,如果有一张图和实际示例效果,那就省很多事...

1101
来自专栏ThoughtWorks

前端页面替换文本的方法和一些小技巧

在前端页面替换文本有几种做法,不假思索的答案通常是直接用JavaScript。但你有没有想过这完全可以用CSS实现呢? 背景 在前端页面上,有的时候我们需要...

3547
来自专栏吴老师移动开发

【iOS开发】UITableView优化

移动开发中,任何一个应用都或多或少的有列表的存在,列表的上下滑动直接关系到用户体验。如果处理不好,就会使得列表滑动起来有明显的卡顿效果。所以对列表的优化,让它更...

1091
来自专栏数据派THU

独家 | Tableau使用窍门:轻松学会设计仪表板

如果你参加过仪表板大全(Big Book of Dashboards)的专题会、发表会、或网络研讨会,那么你肯定已经听作者们(包括我自己)谈论到网格设计的重要性...

1982
来自专栏葡萄城控件技术团队

三天学会HTML5 ——多媒体元素的使用

目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位...

2679
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

9076
来自专栏数据小魔方

office颜色配置技巧与自定义颜色主题

上一篇给大家介绍了基础的色彩知识,今天要跟大家简单介绍一下office(office系列所有套件的调色板是通用的)办公软件的内置色板的使用技巧以及如何自定义颜色...

3667

扫码关注云+社区

领取腾讯云代金券