我很确定我对如何/何时调用fa-animate-enter有一些基本的错误理解。如果单击该框,下面的代码可以工作,它会缩放,但我希望当fa-view变为活动状态时,它也会调用fa-animate-enter而不是需要点击。当视图变为活动状态时,如何调用animateScale_enter()?
http://plnkr.co/edit/r2OSonPSvAQREAHvns7F
<fa-view fa-animate-enter="animateScale_enter()"
fa-animate-leave="animateScale_leave()"
fa-animate-halt="animateScale_halt()" >
<fa-modifier fa-origin="[0.5, 0.5]"
fa-align="[0.5, 0.5]"
fa-scale="scale.get()"
>
<fa-surface fa-background-color="'#dc322f'"
fa-size="[100, 100]"
fa-click="animateScale_enter()"
>{{text}}
</fa-surface>
</fa-modifier>
</fa-view>
的.js
<script>
var app=angular.module('MyApp', ['famous.angular'])
.controller('MainController',
function($scope, $famous) {
var Transitionable = $famous['famous/transitions/Transitionable'];
var SpringTransition = $famous['famous/transitions/SpringTransition'];
Transitionable.registerMethod('spring', SpringTransition);
$scope.viewType="view2";
$scope.text="Scale=[1,1,1], click";
$scope.scale = new Transitionable([1, 1, 1]);
$scope.animateScale_enter = function() {
console.log("enter");
$scope.text="Scale=[2,2,1], enter";
$scope.scale.set([2, 2, 1], {
method: 'spring',
period: 750,
dampingRatio: 0.3
});
};
$scope.animateScale_leave = function() {
console.log("leave");
};
$scope.animateScale_halt = function() {
console.log("halt");
scope.transform.halt()
};
}
);
</script>
答案 0 :(得分:0)
显然它连接到ng-repeat,从我收集的东西,任何强制dom更新的东西...... ??
所以只需在fa-view中添加一个虚拟ng-repeat就可以了。
<fa-view ng-repeat="x in {x:1}"
fa-animate-enter="animateScale_enter()"
fa-animate-leave="animateScale_leave()"
fa-animate-halt="animateScale_halt()" >
我希望有人能给我一个更好的方法来做到这一点。我只是觉得这样做很脏。