Angular v1.2 动画图像

Question

我一直在阅读教程和过去的问题，试图找出我的代码在将动画应用于我要显示的图像的过渡时出错的地方。

ng-show 有效地仅显示选定的图片，但图片的过渡并没有获得我尝试应用到它的效果。

<!-- Image Buttons -->
<div class="content">
  <div ng-repeat='image in images' class="{{image.cls}}" 
  ng-click="showThis($index)" value="{{image.set}}">
    <label>{{image.title}}</label>
  </div>
</div>

<!-- Display Image -->
<div id="imgHolder" ng-view class="slidedown">
    <img ng-repeat="image in images" ng-src="{{image.url}}" 
    alt="{{image.id}}" ng-show="nowShowing==$index">
</div>

我意识到我可能应该使用相同的 ng-repeat 来显示图像；目前需要调整实现这一点的 css，以便稍后进行。

这里是.slidedown，包含动画css：

.slidedown {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slidedown.ng-enter,
.slidedown.ng-leave {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.slidedown.ng-enter {
  opacity: 0;
}
.slidedown.ng-enter-active {
  opacity: 1;
}
.slidedown.ng-leave {
  opacity: 1;
}
.slidedown.ng-leave-active {
  opacity: 1;
}

任何人都可以提供任何提示、错误、方向吗？

Answer 1

只需将 class="slidedown" 放在 img 而不是 div 上

<div id="imgHolder" ng-view>
    <img ng-repeat="image in images" ng-src="{{image.url}}"  class="slidedown" 
    alt="{{image.id}}" ng-show="nowShowing==$index">
</div>