I am in the process of creating a basic query system. While I can display questions one at a time, I am looking to incorporate transitions when switching between questions.
To further illustrate my issue, I have set up a Plunker demonstration: http://plnkr.co/edit/svaWMRCy8P8xtMvmIEBA?p=preview
The concept is to fade out the div containing the current question and answers, then fade in the new question smoothly.
After researching on Stack Overflow, I came across a similar inquiry. However, comments suggested that the method mentioned there is now outdated.
I attempted to implement a directive from another post:
.directive('uiFadeToggle', function() {
return {
link: function(scope, element, attrs) {
console.log(element);
scope.$watch(attrs.uiFadeToggle, function(val, oldVal) {
if (val === oldVal) return; // Skip initial call
element[val ? 'fadeIn' : 'fadeOut'](1000);
});
}
};
})
Unfortunately, I keep encountering this error message:
element[(intermediate value)(intermediate value)(intermediate value)] is not a function
Is there a way for me to animate changes in my model? Ideally, I prefer a CSS-only approach.
EDIT:
My current workaround involves utilizing Animate.css, but I am open to alternative solutions if there are better options available. Please provide them as an answer.