AngularJS ng-show animation cross-fade inside ng-repeat


Tags: javascript,css,angularjs,ng-animate,ng-show

Problem :

Simple (but not for me!) angularjs show/hide animation problem.

I have searched high and low but not found the solution to this specific problem, which can perhaps be best explained with an example and a "challenge".

First, the example: http://jsfiddle.net/adammontanaro/QErPe/1/

The challenge: can anyone make those images fade in and out over each other, rather than appearing below or above the currently shown image, then popping into place once the upper image's div is hidden?

The HTML:

<div>
    <div data-ng-repeat="k in kitties" >
        <img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" />
    </div>
</div>

CSS:

.animate-show, .animate-hide {
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -ms-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;

}

.animate-show {
  opacity:0;
}

.animate-show.animate-show-active {
  opacity:1;
}

.animate-hide {
  opacity:1;
}

.animate-hide.animate-hide-active {
  opacity:0;
}

I have been spinning my wheels on this for hours. I've seen scads of good posts demonstrating how to make a single image or div appear or disappear, but it all breaks down when I'm trying to simple cross-fade and replace. I've tried messing about with absolute/relative positioning, but to no avail.

Tried this with a switch, but wasn't able to use $index in the switch condition, so I could load my images at run-time. That is a big requirement here.

FYI - this is using angular 1.1.5

Thank you!!! Adam



Solution :

You actually have it all correct! You're just missing a little CSS.

I fixed up your jsfiddle with the right stuff (a dash of position relative and absolute and a pinch of height) and it works like a charm.

The bulk of the new stuff is:

.container{
    position: relative;
    /* you have to add a height here if your container isn't otherwise set 
       becuse the absolutely positioned image divs won't calculate the height 
       for you */
    height: 100px;
}
.image-repeat{
    position: absolute;
    top: 0;
    left: 0;
}

With the classes applied in your HTML as needed.

Check it out: http://jsfiddle.net/QErPe/2/

Hope that helps!


    CSS Howto..

    How can I change the number of columns in the product list?

    How to make a hidden border side inherit border properties in CSS

    How to target entire Bootstrap navbar

    How to ask browsers to refresh (flush) the cache of my website?

    How to style a credit card expiration date input field to include spaces and forward slash?

    How to avoid the text inside the bootstrap button overflow?

    how to remove element.style in css

    Why does the dropdownlist show under the div

    How can I make these floated divs wrap properly?

    How to attach for every Array-Element in jQuery different Animationeffects? And animate one by one forwards and backwards with 2 Buttons(back&next)?

    How to: Reduce font-size if a line breaks

    hide/show element with add/removeClass with CSS transition

    How to scroll to particular element using CSS/JS

    How to get relative CSS from photoshop artboard?

    How to dynamically create CSS class in JavaScript and apply?

    How to clean style sheets mess? [duplicate]

    How do I require main.css.erb in application.css

    Updating CSS via plain JavaScript… how do I update if the property uses vendor prefixes?

    How to remove excess space added with \n

    how would I use Javascript, html and css to produce the running tiger effect seen in run4tigers website? [closed]

    How do I align div vertically like in picture

    How to clip inside a box in css?

    How to apply style to Nth instance of class, and find by indirect inheritance - CSS Jquery

    how to let CMS make use of my css files instead of its own css?

    show/hide div on click

    How to add class based on which css class name is come in jquery

    How to stop background layering with CSS?

    How to apply css rules to html element using ExtJS?

    How to prevent Float contents overlap other contents below

    How to align the overlay with the list of icons on hover- JS /CSS