0

将 Animate.css 和 AngularJS 放在一起有点麻烦，我创建了一个简单的示例，希望也能解决这个问题。

我有一些从 controller.js 发送的信息，它被放入一个<div><p>. 我希望能够使用 Animate.css 中的按钮和淡入淡出效果淡入和淡出这个 div（仅以淡入淡出为例）。

当页面加载时，它会正确显示“Hello World”。淡出和工作，除非它淡入它返回 {{results}} 而不是 Hello World。

有没有合适的方法来完成这项工作？任何帮助表示赞赏！谢谢！

索引.html：

<!DOCTYPE html>
<html lang="en" ng-app="prApp">
    <head>
        <title>Test123</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
        <link rel="stylesheet" href="./css/animate.min.css">

        <script src="./bower_components/jquery/jquery.min.js"></script>
        <script src="lib/angular.min.js"></script>
        <script src="js/controllers.js"></script>
    </head>
    <body ng-controller="prCtrl" >
        <button type="button" onclick='$("#testDiv").addClass("animated fadeInUp");'>Fade In</button>
        <button type="button" onclick='$("#testDiv").addClass("animated fadeOutUp");'>Fade Out</button>
        <div id='testDiv'>
            <p>{{results}}</p>
        </div>
    </body>
</html>

控制器.js：

var prApp, prCtrl;

prApp = angular.module("prApp", []);

prApp.controller("prCtrl", prCtrl = function($scope, $rootScope) {
  $rootScope.results = 'Hello World!';
  return $scope.$apply();
});
4

2 回答 2

1

为什么不使用ng-animate和ng-class？

于 2013-11-12T02:58:51.723 回答
1

检查这个plunker

有用。

我只是在 addClass 之前添加 removeClass

<button type="button" onclick='$("#testDiv").removeClass().addClass("animated fadeInUp");'>Fade In</button>
<button type="button" onclick='$("#testDiv").removeClass().addClass("animated fadeOutUp");'>Fade Out</button>

并删除

return $scope.$apply();
于 2013-11-12T03:53:36.280 回答