Angular v1.2的图像动画

Angular v1.2 animation for images

本文关键字：图像 动画 v1 Angular      更新时间：2023-09-26

我一直在通过教程和过去的问题，试图找出我的代码在哪里出错应用动画到我试图显示的图像的过渡。

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"放在屏幕上而不是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>
相关文章：