如何触发控制器方法的angularjs动画？ [英] How to trigger an angularjs animation from a controller method?
本文介绍了如何触发控制器方法的angularjs动画？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想从一个控制器方法触发角的动画。
我想出了，我不太满意（见下文code）的东西。
问题是，我的动画工作，我需要跟踪$范围的状态变量，即 $ scope.shake ：
$ scope.signin =功能（formCtrl）{
$ scope.shake = FALSE;
如果（$ scope.credentials）{
signinService.signin（$ scope.credentials，功能（状态，memberRole）{
$ scope.shake = FALSE;
// TODO：需要检查状态？
如果（状态=== 200）{
VAR memberType;
如果（memberRole ==='ROLE_BASIC_PARENTS'）{
memberType ='父母';
}
如果（memberRole ==='ROLE_BASIC_CHILDCARE_WORKER'）{
memberType ='托儿工作者;
}
$ rootScope.globals = {
memberType：memberType，
验证：'OK'
} $ cookies.globalsMemberType = $ rootScope.globals.memberType;
$ cookies.globalsAuthenticated = $ rootScope.globals.authenticated; $ state.go（仪表盘，{memberType：memberType}）;
}
}，
功能（）{
$ scope.shake = TRUE;
}）;
}
其他{
$ scope.shake = TRUE;
}
};＆LT;形式纳克级={摇：晃动}NAME =formCtrlNG提交=登入（formCtrl）的novalidate＆GT;
有人可以请告知一个清洁的解决方案？
编辑1
下面是所要求的CSS code：
@ - WebKit的关键帧动摇{
0％{
-webkit-变换：translateX（0）;
变换：translateX（0）;
} 12.5％{
-webkit-变换：translateX（-6px）rotateY（-5deg）;
变换：translateX（-6px）rotateY（-5deg）;
} 37.5％{
-webkit-变换：translateX（5像素）rotateY（4deg）;
变换：translateX（5像素）rotateY（4deg）;
} 62.5％{
-webkit-变换：translateX（-3px）rotateY（-2deg）;
变换：translateX（-3px）rotateY（-2deg）;
} 87.5％{
-webkit-变换：translateX（2像素）rotateY（1deg）;
变换：translateX（2像素）rotateY（1deg）;
} 100％{
-webkit-变换：translateX（0）;
变换：translateX（0）;
}
}@keyframes动摇{
0％{
-webkit-变换：translateX（0）;
变换：translateX（0）;
} 12.5％{
-webkit-变换：translateX（-6px）rotateY（-5deg）;
变换：translateX（-6px）rotateY（-5deg）;
} 37.5％{
-webkit-变换：translateX（5像素）rotateY（4deg）;
变换：translateX（5像素）rotateY（4deg）;
} 62.5％{
-webkit-变换：translateX（-3px）rotateY（-2deg）;
变换：translateX（-3px）rotateY（-2deg）;
} 87.5％{
-webkit-变换：translateX（2像素）rotateY（1deg）;
变换：translateX（2像素）rotateY（1deg）;
} 100％{
-webkit-变换：translateX（0）;
变换：translateX（0）;
}
}.shake {
-webkit-动画：摇400ms的易用性在出;
动画：摇400ms的易用性在出;
}
解决方案
下面是我最终使用（见下文code）的解决方案。这是Liamnes的提出的解决方案的适应。
angular.module（'登入'）
.controller（'SigninCtrl'，['$范围，$ rootScope'，'$饼干'，'$州'，'$动画，signinService'，函数（$范围，$ rootScope，$饼干，$状态，$动画，signinService）{ VAR setPersonalInfo =功能（参数）{
返回signinService.setPersonalInfo（param.headers，$ rootScope）;
};
VAR goToDashboard =功能（memberType）{
$ state.go（仪表盘，{memberType：memberType}）;
};
VAR reportProblem =功能（）{
$ scope.formCtrl.username $ setValidity（'username.wrong'，虚假）。
$ scope.formCtrl.password $ setValidity（'password.wrong'，虚假）。
。$ $范围广播（'SIGNIN_ERROR'）;
};
VAR resetForm =功能（formCtrl）{
formCtrl.username $ setValidity（'username.wrong'，真）。
。formCtrl.password $ setValidity（'password.wrong'，真）;
}; $ scope.signin =功能（formCtrl）{ resetForm（formCtrl）; 如果（formCtrl $有效）{
signinService.signin($scope.credentials).then(setPersonalInfo).then(goToDashboard).catch(reportProblem);
}
其他{
。$ $范围广播（'SIGNIN_ERROR'）;
}
}
}]）
.directive（'shakeThat'，['$动画'，函数（$动画）{
返回{
要求：'^形式，
范围： {
登入：'和;'
}，
链接：功能（范围，元素，ATTRS，形式）{
范围。在（'SIGNIN_ERROR'$，函数（）{
$ animate.addClass（元素，'摇'），然后（函数（）{
$ animate.removeClass（元素，'摇'）;
}）;
}）;
}
};
}]）;
HTML
＆LT;形式换血那名=formCtrlNG提交=登入（formCtrl）的novalidate＆GT;
I would like to trigger an angular animation from a controller method.
I have come up with something that I am not satisfied with (see code below).
The issue is that for my animation to work, I need to track the state of a $scope variable i.e. $scope.shake:
$scope.signin = function (formCtrl) {
$scope.shake = false;
if ($scope.credentials) {
signinService.signin($scope.credentials, function (status, memberRole) {
$scope.shake = false;
//TODO: necessary to check status?
if (status === 200) {
var memberType;
if (memberRole === 'ROLE_BASIC_PARENTS') {
memberType = 'parents';
}
if (memberRole === 'ROLE_BASIC_CHILDCARE_WORKER') {
memberType = 'childcare-worker';
}
$rootScope.globals = {
memberType: memberType,
authenticated: 'OK'
}
$cookies.globalsMemberType = $rootScope.globals.memberType;
$cookies.globalsAuthenticated = $rootScope.globals.authenticated;
$state.go('dashboard', {memberType: memberType});
}
},
function () {
$scope.shake = true;
});
}
else {
$scope.shake = true;
}
};
<form ng-class="{shake: shake}" name="formCtrl" ng-submit="signin(formCtrl)" novalidate>
Can someone please advise a cleaner solution?
edit 1:
Here is the css code as requested:
@-webkit-keyframes shake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
12.5% {
-webkit-transform: translateX(-6px) rotateY(-5deg);
transform: translateX(-6px) rotateY(-5deg);
}
37.5% {
-webkit-transform: translateX(5px) rotateY(4deg);
transform: translateX(5px) rotateY(4deg);
}
62.5% {
-webkit-transform: translateX(-3px) rotateY(-2deg);
transform: translateX(-3px) rotateY(-2deg);
}
87.5% {
-webkit-transform: translateX(2px) rotateY(1deg);
transform: translateX(2px) rotateY(1deg);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes shake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
12.5% {
-webkit-transform: translateX(-6px) rotateY(-5deg);
transform: translateX(-6px) rotateY(-5deg);
}
37.5% {
-webkit-transform: translateX(5px) rotateY(4deg);
transform: translateX(5px) rotateY(4deg);
}
62.5% {
-webkit-transform: translateX(-3px) rotateY(-2deg);
transform: translateX(-3px) rotateY(-2deg);
}
87.5% {
-webkit-transform: translateX(2px) rotateY(1deg);
transform: translateX(2px) rotateY(1deg);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.shake {
-webkit-animation: shake 400ms ease-in-out;
animation: shake 400ms ease-in-out;
}
解决方案
Here is the solution I ended up using (see code below). It is an adaptation of Liamnes's proposed solution.
angular.module('signin')
.controller('SigninCtrl', ['$scope', '$rootScope', '$cookies', '$state', '$animate', 'signinService', function ($scope, $rootScope, $cookies, $state, $animate, signinService) {
var setPersonalInfo = function (param) {
return signinService.setPersonalInfo(param.headers, $rootScope);
};
var goToDashboard = function (memberType) {
$state.go('dashboard', {memberType: memberType});
};
var reportProblem = function () {
$scope.formCtrl.username.$setValidity('username.wrong', false);
$scope.formCtrl.password.$setValidity('password.wrong', false);
$scope.$broadcast('SIGNIN_ERROR');
};
var resetForm = function(formCtrl){
formCtrl.username.$setValidity('username.wrong', true);
formCtrl.password.$setValidity('password.wrong', true);
};
$scope.signin = function (formCtrl) {
resetForm(formCtrl);
if (formCtrl.$valid) {
signinService.signin($scope.credentials).then(setPersonalInfo).then(goToDashboard).catch(reportProblem);
}
else {
$scope.$broadcast('SIGNIN_ERROR');
}
}
}])
.directive('shakeThat', ['$animate', function ($animate) {
return {
require: '^form',
scope: {
signin: '&'
},
link: function (scope, element, attrs, form) {
scope.$on('SIGNIN_ERROR', function () {
$animate.addClass(element, 'shake').then(function () {
$animate.removeClass(element, 'shake');
});
});
}
};
}]);
HTML:
<form shake-that name="formCtrl" ng-submit="signin(formCtrl)" novalidate>
这篇关于如何触发控制器方法的angularjs动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
