CODEWITHSUNDEEP
javascriptangularjs
Misiu
Misiu

Reputation: 4919

fade out and in (animate) when changing model

I'm building simple query system.
I'm able to display questions one by one, but I'd like to add transitions when I change questions.

I've build Plunker to show my problem: http://plnkr.co/edit/svaWMRCy8P8xtMvmIEBA?p=preview

Idea is to fade out div containing question with answers and fade in new question.

I've searched over SO and found similar question, but in comments I found info that this method is deprecated.

I've tried using directive from one of questions:

.directive('uiFadeToggle', function() {
  return {
    link: function(scope, element, attrs) {
      console.log(element);
      scope.$watch(attrs.uiFadeToggle, function(val, oldVal) {
        if (val === oldVal) return; // Skip inital call
        // console.log('change');
        element[val ? 'fadeIn' : 'fadeOut'](1000);
      });
    }
  };
})

but all the time I get this error:

element[(intermediate value)(intermediate value)(intermediate value)] is not a function

How can I animate my model change? Ideally I'd like to use CSS only approach.

EDIT:
My current solution is using Animate.css, but if there is a better way please add it as answer.

Upvotes: 2

Views: 150

Answers (1)

Daniel
Daniel

Reputation: 579

Here is a variation using ng-if coupled with ng-animate. The animations are done using the css classes.

http://plnkr.co/edit/zVLdeQSELkATvC2ltvQG?p=info

div class="question-slide animate-switch" ng-animate=" 'animate' " ng-if="idx === questionIndex">

The animation between the questions are controlled by the css classes

.animate-switch.ng-animate {
    transition: all cubic-bezier(.25, .46, .45, .94) .5s;
}

.animate-switch.ng-leave {
    opacity: 1
}

.animate-switch.ng-leave.ng-leave-active {
    opacity: 0;
}

.animate-switch.ng-enter {
    opacity: 0
}

.animate-switch.ng-enter.ng-enter-active {
    opacity: 1
}

Upvotes: 1

Related Questions