javascript - 更改模型时淡出和淡入(动画)

Question

我正在构建简单的查询系统。
我能够一个接一个地显示问题，但我想在更改问题时添加转换。

我构建了 Plunker 来显示我的问题:http://plnkr.co/edit/svaWMRCy8P8xtMvmIEBA?p=preview

想法是淡出包含问题和答案的 div 并淡入新问题。

我搜索了 SO 并找到了 similar question ，但在评论中我发现此方法已被弃用的信息。

我尝试使用来自以下问题之一的指令:

.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);
      });
    }
  };
})

但我总是收到这个错误:

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

如何为我的模型变化制作动画？理想情况下，我想使用纯 CSS 方法。

编辑:
我的current solution正在使用 Animate.css , 但如果有更好的方法，请将其添加为答案。

Answer 1

这是使用 ng-if 和 ng-animate 的变体。动画是使用 css 类完成的。

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

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

问题之间的动画由css类控制

.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
}