在网页中图片的显示都是加载好了之后就直接显示出来，视觉上看起来会和闪了一下一样。这让有强迫症的我非常忍受不了。
所以让图片慢慢显示（淡出效果）的话，会让视觉效果好受一点。
实现淡出效果有两种方法，但是原理都是让图片的不透明度从0变到1。
方法一：transition
1.先给el-image的opacity（不透明度）设置为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.触发transition：我写在了发送http请求获取图片成功后，改变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;}
}
知识点：
1.transition
transition: property duration timing-function delay;
| 值 | 描述 |
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
2.animation
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
