在網(wǎng)頁(yè)中圖片的顯示都是加載好了之后就直接顯示出來，視覺上看起來會(huì)和閃了一下一樣。這讓有強(qiáng)迫癥的我非常忍受不了。
所以讓圖片慢慢顯示（淡出效果）的話，會(huì)讓視覺效果好受一點(diǎn)。
實(shí)現(xiàn)淡出效果有兩種方法，但是原理都是讓圖片的不透明度從0變到1。

方法一：transition

1.先給el-image的opacity（不透明度）設(shè)置為0，并添加transition

.el-image {
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-in-out;
    -moz-transition: opacity 0.6s ease-in-out;
    -o-transition: opacity 0.6s ease-in-out;
    -ms-transition: opacity 0.6s ease-in-out;
    transition: opacity 0.6s ease-in-out;
}

2.觸發(fā)transition：我寫在了發(fā)送http請(qǐng)求獲取圖片成功后，改變opacity（不透明度）為1。

document.getElementsByClassName("el-image")[0].style.opacity = 1

方法二：animation

.el-image {
  width: 100%;
  height: 100%;
  opacity: 0;
  animation:mymove 0.6s ease-in forwards;
}
@keyframes mymove
{
   10% { opacity: 0.1;}
   50% { opacity: 0.5;}
   60% { opacity: 0.6;}
   90% { opacity: 0.9;}
   100% { opacity: 1;}
}

知識(shí)點(diǎn)：

1.transition

transition: property duration timing-function delay;

| 值 | 描述 |
| transition-property | 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。 |
| transition-duration | 規(guī)定完成過渡效果需要多少秒或毫秒。 |
| transition-timing-function | 規(guī)定速度效果的速度曲線。 |
| transition-delay | 定義過渡效果何時(shí)開始。 |
2.animation

animation: name duration timing-function delay iteration-count direction;

| 值 | 描述 |
| animation-name | 規(guī)定需要綁定到選擇器的 keyframe 名稱。。 |
| animation-duration | 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。 |
| animation-timing-function | 規(guī)定動(dòng)畫的速度曲線。 |
| animation-delay | 規(guī)定在動(dòng)畫開始之前的延遲。 |
| animation-iteration-count | 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。 |
| animation-direction | 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。 |

詳細(xì)教程