介紹一些看似簡單又不是那么容易的過渡小技巧。

很多 CSS 屬性其實(shí)是不支持過渡變化的，例如flex中的對齊。

justify-content: start | center | end

或者是文本對齊。

text-align: left | center | right

這樣屬性在變化時是沒有過渡動畫的，但有時又需要這樣的動效，比如下面這個效果：

有人會覺得這不就是一個普通的位移動畫嗎，給個固定位移不就可以了？但這個位移的距離其實(shí)是不固定的，是跟隨外部容器變化的，這應(yīng)該如何實(shí)現(xiàn)呢？下面介紹一些思路。

一、定位+偏移

首先簡單布局示意一下：

<div class="con">
  <div class="item"></div>
</div>

加點(diǎn)修飾。

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

現(xiàn)在效果如下，那么如何從左平滑的向右移動呢？

既然常規(guī)的對齊方式無法實(shí)現(xiàn)，是不是可以換種方式實(shí)現(xiàn)對齊呢？

說到對齊，很容易想到定位，比如默認(rèn)是left:0，居右就是left:100%。

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

/* 變化后 */
.item{
  left: 100%;
}

動態(tài)演示如下：

可以看到left:100%后元素已經(jīng)出去了，這樣因為這里的100%偏移量是相對父級的，為了不出去，所以需要修正一下，讓元素向左平移自身的寬度，這里可以用translate，剛好是相對于自身的。

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

/* 變化后 */
.item{
  left: 100%;
  transform: translateX(-100%);
}

也就是需要通過兩個屬性的變化完成了從左到右的平滑過渡，示意如下：

這樣就比較完美了。

你也可以訪問以下鏈接查看效果：

• CSS align transition(position) (juejin.cn)[1]

當(dāng)然除了相對定位，margin-left也是可以的。

二、彈性布局?jǐn)D壓

除了以上定位偏移的方式外，還可以用彈性布局的方式實(shí)現(xiàn)，這里以flex為例。

大家可能都用過flex:1這樣的屬性，表示填充剩余空間。如果是flex:0呢？表示填充比例是0，也就相當(dāng)于不占空間，這樣通過彈性布局的擠壓，是不是也相當(dāng)于居左變到了居右。

而flex的變化是支持過渡的，所以也能輕松實(shí)現(xiàn)左右的過渡效果。

還是前面的布局，我們可以用偽元素::before來充當(dāng)擠壓元素。

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

/* 變化后 */
.con::before{
  flex: 1;
}

實(shí)際效果如下：

是不是也很容易呢？你也可以訪問以下鏈接查看效果。

• CSS align transition(flex) (juejin.cn)[2]

對了，如果你想實(shí)現(xiàn)居左到居中的效果，可以用兩個偽元素，原理也是類似的。

三、背景位置變化

這個場景可能適用性沒那么強(qiáng)，如果你剛好是操作背景的位置變化，那就可以關(guān)注一下。

關(guān)于background-position的百分比，可能很多小伙伴都忽視了，官方是這么描述的。

給定背景圖像位置的百分比偏移量是相對于容器的。值 0% 表示背景圖像的左（或上）邊界與容器的相應(yīng)左（或上）邊界對齊，或者說圖像的 0% 標(biāo)記將位于容器的 0% 標(biāo)記上。值為 100% 表示背景圖像的 右（或 下）邊界與容器的 右（或 下）邊界對齊，或者說圖像的 100% 標(biāo)記將位于容器的 100% 標(biāo)記上。因此 50% 的值表示水平或垂直居中背景圖像，因為圖像的 50% 將位于容器的 50% 標(biāo)記處。類似的，background-position: 25% 75% 表示圖像上的左側(cè) 25% 和頂部 75% 的位置將放置在距容器左側(cè) 25% 和距容器頂部 75% 的容器位置。

它還有個計算公式。

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

看似復(fù)雜，其實(shí)只需要記住一點(diǎn)就夠了，0%就是最左（上）,100%就是最右（下）,而不必關(guān)注背景的尺寸。

剛好就是我們前面需要的效果，也不必考慮偏移量。

可以看下面的演示：

四、換種布局思路

有時候，一種布局行不通，換種布局思路也是不錯的。本文介紹的一些位移過渡的小技巧，你學(xué)到了嗎？下面總結(jié)一下

• 很多 CSS 屬性是不支持過渡變化的，比如方位對齊屬性。
• 常規(guī)的對齊方式無法實(shí)現(xiàn)過渡，可以換種方式實(shí)現(xiàn)對齊。
• 相對定位left百分比偏移量是相對父級的，直接使用 100%會導(dǎo)致自身脫離父級范圍。
• translate百分比偏移量是相對于自身的，使用-100%可以消除相對定位的影響。
• flex布局可以利用容器填充剩余空間的原理實(shí)現(xiàn)居左或者居右
• 背景位置排除了背景尺寸的影響，100%表示最右（下）,而不必關(guān)注背景的尺寸。

[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。