CSS3动画与display:block合用不生效问题

在开发时遇到这个问题，发现无论怎么调试动画都没有出现想要的效果，最后发现是因为和display:block结合的原因。
分析产生这种现象的原因：
display:none表示文档流中是不存在该元素的，display:block才是往文档流中插入该元素，而transition则是先被解析，transition属性无法对一个从无到有的元素进行过渡显示，所以display做不了过渡效果。
解决方法：
1、用animation和与visibility

.div{
  visibility:hidden;
  opacity:0;
  transform:translateY(100px);
  -webkit-transform: translateY(100px);
  transition:.3s;
}
.show{
  animation:show .3s forwards;
  -webkit-animation: show .3s forwards;
}

.hide{
  visibility:visible;
  opacity: 1;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  animation:hide .3s forwards;
  -webkit-animation: hide .3s forwards;
}
@keyframes show{
  100%  {
    visibility:visible;
    opacity: 1;
    transform: translateY(0);
     -webkit-transform: translateY(0);
  }
}
@keyframes hide{
  100%  {
    visibility:hidden;
    opacity: 0;
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
  }
}

2、绝对定位和visiblity

.div{
	position: absolute;
  	top: 0;
    left: 0;
	visibility:hidden;
  	opacity:0;
	z-index: 999;
  	transform:translateY(100px);
  	-webkit-transform: translateY(100px);
  	transition:.3s;
  }
.show{
  animation:show .3s forwards;
  -webkit-animation: show .3s forwards;
}

.hide{
  visibility:visible;
  opacity: 1;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  animation:hide .3s forwards;
   -webkit-animation: hide .3s forwards;
}
@keyframes show{
  100% {
    visibility:visible;
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}
@keyframes hide{
  100% {
    visibility:hidden;
    opacity: 0;
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
  }
}

3、display和setTimeout延迟

.div {
     display: block;
}
.hide1 {  
   transition: opacity 1s,
   -webkit-transition: opacity 1s,
   -moz-transition: opacity 1s,
   -o-transition: opacity 1s,
   -ms-transition: opacity 1s,
   opacity: 0.1
}
.hide2 {
	display:none;
}
function divAnimate1($div, divClass1, divClass2) {
    $div.addClass(hide1);
    setTimeout(function(){
        $div.addClass(hide2);
    }, 1000);
}