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

但是我一直收到这个错误：

元素[（中间值）（中间值）（中间值）] 不是一个功能

如何为模型更改设置动画？理想情况下，我只想使用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
}

在改变模型时淡出并进入（动画）

1 个答案: