Блог

Я просматривал учебные пособия и прошлые вопросы, пытаясь выяснить, где мой код идет не так, чтобы применить анимацию к переходу изображений, которые я пытаюсь отобразить.

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;
}
  

Кто-нибудь может предоставить какие-либо советы, ошибки, указания, которые следует использовать?

просто поместите 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>