前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[小技巧]巧妙使用flex, letter-spacing实现过渡动画

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

作者头像
IMWeb前端团队
发布2018-01-08 17:14:12
1.7K0
发布2018-01-08 17:14:12
举报
文章被收录于专栏:IMWeb前端团队

本文作者: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宽度改变了, 需要的效果是, 向右移出, 怎么来实现?
代码语言:javascript
复制
    <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的范围~ 如果有读者知道可以评论一下下~![]

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 那么flex什么时候配合transition是没有动画的捏?
    • 那么如何是实现这个过程有动画捏?
      • 还有什么可以改变容器宽度? 答案是letter-spacing
        • 但是, 这个有缺陷么? 有~
          • 最后 flex宽度改变了, 需要的效果是, 向右移出, 怎么来实现?
          相关产品与服务
          容器服务
          腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档