在页面加载时设置ng-animate以淡入图像

Question

我试图让ng-animate在页面加载时淡入图像，但收效甚微。我错过了什么？

到目前为止，这是我的代码：

HTML

<img class="logo fade-in" 
     src="images/dog.svg" 
     ng-animate="{show:'animate-show', hide:'animate-hide'}">

CSS

.animate-show, .animate-hide {
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -ms-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;

}

.animate-show {
  opacity:0;
}

.animate-show.animate-show-active {
  opacity:1;
}

.animate-hide {
  opacity:1;
}

.animate-hide.animate-hide-active {
  opacity:0;
}