介紹一些看似簡單又不是那么容易的過渡小技巧。
很多 CSS 屬性其實是不支持過渡變化的,例如flex中的對齊。
justify-content: start | center | end
或者是文本對齊。
text-align: left | center | right
這樣屬性在變化時是沒有過渡動畫的,但有時又需要這樣的動效,比如下面這個效果:
有人會覺得這不就是一個普通的位移動畫嗎,給個固定位移不就可以了?但這個位移的距離其實是不固定的,是跟隨外部容器變化的,這應該如何實現呢?下面介紹一些思路。
首先簡單布局示意一下:
<div class="con"> <div class="item"></div></div>
加點修飾。
.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。
本文鏈接:http://www.www897cc.com/showinfo-26-77524-0.htmlCSS 實現居左到居右過渡變化的一些思路
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com