页面加载模糊过渡的方法

数据到来前的样式

.container {
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);    
        filter: blur(10px);
}

数据到来后增加hidden class

/* 隐藏 */
.hidden {
  -webkit-filter: blur(0px); /* Chrome, Opera */
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  animation: blur 0.3s;
}

@keyframes blur {
  from {
    -webkit-filter: blur(10px); /* Chrome, Opera */
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
  }

  to {
    -webkit-filter: blur(0px); /* Chrome, Opera */
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
}