Angular 和 Animate.css - 一起使用时不显示正确的信息

Angular and Animate.css - Doesn't display correct information when used together

本文关键字：显示 信息 Animate css 一起 Angular      更新时间：2023-09-26

将Animate.css和AngularJS放在一起时遇到了一些麻烦，我创建了一个简单的例子，希望能解决这个问题。

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

当页面加载时，它会正确显示"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();
});

检查这个 plunker

它有效。

我只是在添加类之前添加删除类

<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();

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

相关文章：