Ng类-在将一个类添加到DOM后删除该类

Ng-class - remove a class after it is added to the DOM

本文关键字：添加 DOM 删除 一个 Ng      更新时间：2023-09-26

我正在使用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

     };
})

动画后如何删除类？

将animation.shake的值更改为false将删除该类。将其更改为true将添加类。这是ng类如何工作的基础。如果您希望动画运行一段时间，则需要使用$timeout进行切换。根据你的代码很难判断。以下示例使用$timeout删除该类，该类在2000毫秒后执行。

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

CSS.红色{颜色：红色；}

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>

相关文章：