4

同じ要素でアニメーションを作成するために animate.css を使用しています。クラスを追加した後にクラスを削除する際に問題が発生しています。

HTML

 <form ng-submit="animate()" ng-controller="AnimateCtrl">
    <input type='text' ng-model="some">
 </form>
 <div ng-class="{shake:animation.shake}" class="animated">

角度

myapp.controller(function($scope){
     var animation = $scope.animation = {
           shake:false
     };

     $scope.animate=function(){

         //remove the class first and add it back again

          animation.shake = false

          animation.shake = true


     };

})

アニメーション後にクラスを削除するにはどうすればよいですか?

4

1 に答える 1

11

animation.shake の値を false に変更すると、クラスが削除されます。true に変更すると、クラスが追加されます。それが ng-class の仕組みの基礎です。アニメーションを一定の間隔で実行したい場合は、$timeout を使用して切り替える必要があります。コードで判断するのは困難です。次の例では、2000 ミリ秒後に実行される $timeout を使用してクラスを削除します。

例 http://plnkr.co/edit/Wtxkrv2nIqSLNfEsvCyI?p=preview

CSS .red{ color:red; }

HTML とコード

<!DOCTYPE html>
<html>

<head>
<script data-require="angular.js@*" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body ng-controller="test">
<h1>Hello Plunker!</h1>
<span ng-class="{'red':animation.shake}">Hello World</span>
<button ng-click="shake()">red</button>
<script>

  var app=angular.module("app",[]);
  app.controller("test",function($scope,$timeout){
    $scope.animation={shake:false};
    $scope.shake=function(){
      $scope.animation.shake=true;
      $timeout(function(){
        $scope.animation.shake=false;
      },2000,true);
    }
  });
  angular.bootstrap(document,["app"]);
</script>

于 2014-04-17T00:18:00.160 に答える