文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS 实现居左到居右过渡变化的一些思路

2024-11-30 00:14

关注

介绍一些看似简单又不是那么容易的过渡小技巧。

很多 CSS 属性其实是不支持过渡变化的,例如flex中的对齐。

justify-content: start | center | end

或者是文本对齐。

text-align: left | center | right

这样属性在变化时是没有过渡动画的,但有时又需要这样的动效,比如下面这个效果:

有人会觉得这不就是一个普通的位移动画吗,给个固定位移不就可以了?但这个位移的距离其实是不固定的,是跟随外部容器变化的,这应该如何实现呢?下面介绍一些思路。

一、定位+偏移

首先简单布局示意一下:

加点修饰。

.con{
  width: 300px;
  border: 8px solid transparent;
  background-color: #FFE8A3;
  border-radius: 8px;
}
.item{
  width: 60px;
  height: 60px;
  border-radius: 4px;
  background-color: #9747FF;
}

现在效果如下,那么如何从左平滑的向右移动呢?

既然常规的对齐方式无法实现,是不是可以换种方式实现对齐呢?

说到对齐,很容易想到定位,比如默认是left:0,居右就是left:100%。

.item{
  position: relative;
  left: 0;
  transition: .2s;
}


.item{
  left: 100%;
}

动态演示如下:

可以看到left:100%后元素已经出去了,这样因为这里的100%偏移量是相对父级的,为了不出去,所以需要修正一下,让元素向左平移自身的宽度,这里可以用translate,刚好是相对于自身的。

.item{
  position: relative;
  left: 0;
  transition: .2s;
}


.item{
  left: 100%;
  transform: translateX(-100%);
}

也就是需要通过两个属性的变化完成了从左到右的平滑过渡,示意如下:

这样就比较完美了。

你也可以访问以下链接查看效果:

当然除了相对定位,margin-left也是可以的。

二、弹性布局挤压

除了以上定位偏移的方式外,还可以用弹性布局的方式实现,这里以flex为例。

大家可能都用过flex:1这样的属性,表示填充剩余空间。如果是flex:0呢?表示填充比例是0,也就相当于不占空间,这样通过弹性布局的挤压,是不是也相当于居左变到了居右。

而flex的变化是支持过渡的,所以也能轻松实现左右的过渡效果。

还是前面的布局,我们可以用伪元素::before来充当挤压元素。

.con{
  display: flex;
}
.con::before{
  content: '';
  flex: 0;
  transition: 1s;
}


.con::before{
  flex: 1;
}

实际效果如下:

是不是也很容易呢?你也可以访问以下链接查看效果。

对了,如果你想实现居左到居中的效果,可以用两个伪元素,原理也是类似的。

三、背景位置变化

这个场景可能适用性没那么强,如果你刚好是操作背景的位置变化,那就可以关注一下。

关于background-position的百分比,可能很多小伙伴都忽视了,官方是这么描述的。

给定背景图像位置的百分比偏移量是相对于容器的。值 0% 表示背景图像的左(或上)边界与容器的相应左(或上)边界对齐,或者说图像的 0% 标记将位于容器的 0% 标记上。值为 100% 表示背景图像的 右(或 下)边界与容器的 右(或 下)边界对齐,或者说图像的 100% 标记将位于容器的 100% 标记上。因此 50% 的值表示水平或垂直居中背景图像,因为图像的 50% 将位于容器的 50% 标记处。类似的,background-position: 25% 75% 表示图像上的左侧 25% 和顶部 75% 的位置将放置在距容器左侧 25% 和距容器顶部 75% 的容器位置。


它还有个计算公式。

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

看似复杂,其实只需要记住一点就够了,0%就是最左(上),100%就是最右(下),而不必关注背景的尺寸。

刚好就是我们前面需要的效果,也不必考虑偏移量。

可以看下面的演示:

四、换种布局思路

有时候,一种布局行不通,换种布局思路也是不错的。本文介绍的一些位移过渡的小技巧,你学到了吗?下面总结一下

[1]CSS align transition(position) (juejin.cn): https://code.juejin.cn/pen/7347208433046650880。

[2]CSS align transition(flex) (juejin.cn): https://code.juejin.cn/pen/7347212824911085579。

来源:前端侦探内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯