javascript - 图像的 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>