After reviewing tutorials and previous questions, I have been trying to pinpoint where my code is going wrong in applying an animation to transition between the images I want to display.
The ng-show function effectively displays the selected picture, but the image transitions are not picking up the effects I am trying to apply.
<!-- 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>
I am aware that displaying the images using the same ng-repeat may be a solution; however, adjustments to the CSS will be necessary for that to happen, which I plan to address later on.
Below is the .slidedown section, containing the animation 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;
}
If anyone has any tips, suggestions, or guidance on how to proceed, it would be greatly appreciated.