jjzjj

javascript - ngAnimate 在 AngularJS 1.6.4 中停止工作

coder 2024-07-25 原文

我有一个带有简单 css 动画的简单应用程序，它在 AngularJS 1.2.2 + ngAnimate 1.2.2 中非常有用:

-> Runnable demo 很有魅力。

(也许)没有理由相同的代码不适用于 AngularJS 1.6.4 + ngAnimate 1.6.4:

-> Broken animation demo

未添加动画 css 类。控制台没有错误。我不知道这里出了什么问题。请注意，$scope.pictures 是虚拟数据。

查看

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
        <link rel="stylesheet" href="./style.css">
        <script src="app.js"></script> 
        <title></title>
    </head>
    <body ng-app="portfolio">
        <div class="gallery" ng-controller="galleryController">
          <div class="appear" ng-repeat="picture in pictures"></div>
        </div>
    </body>
</html>

AngularJS 应用

/*global angular, console*/
var app = angular.module('portfolio', ['ngAnimate']);
(function() {
  "use strict";
  /* Gallery Controller */
  app.controller('galleryController', function(
      $scope
    ) {
      $scope.pictures = [
          "http://www.d3d.sk/images/MK2_Granade_full.png",
          "http://www.d3d.sk/images/aberry-logo.jpg",
          "http://www.d3d.sk/images/logo-aberry.png",
          "http://www.d3d.sk/images/Crystal_balls.jpg",
          "http://www.d3d.sk/images/Purple_sun.jpg",
          "http://www.d3d.sk/images/planets.jpg",
          "http://www.d3d.sk/images/d3d.jpg",
          "http://www.d3d.sk/images/bpg-logo.png",
          "http://www.d3d.sk/images/Logo - Bukona.jpg",
          "http://www.d3d.sk/images/sky_up_fire.jpg",
          "http://www.d3d.sk/images/plexus.jpg",
          "http://www.d3d.sk/images/dch.jpg",
          "http://www.d3d.sk/images/Dimonsium-front-a.jpg",
          "http://www.d3d.sk/images/DWTS-3.jpg",
          "http://www.d3d.sk/images/Dwts-redesign-1.png",
          "http://www.d3d.sk/images/diplom.jpg",
          "http://www.d3d.sk/images/Genessis.jpg",
          "http://www.d3d.sk/images/Genessis - logo-final.jpg",
          "http://www.d3d.sk/images/Genessis - logo.jpg",
          "http://www.d3d.sk/images/Goholor.jpg",
          "http://www.d3d.sk/images/iron.jpg",
          "http://www.d3d.sk/images/bg_body3.jpg",
          "http://www.d3d.sk/images/bg_body4.jpg",
          "http://www.d3d.sk/images/lampa-2.png",
          "http://www.d3d.sk/images/MaxEnergy-design.jpg",
          "http://www.d3d.sk/images/North-first-2.jpg",
          "http://www.d3d.sk/images/North Side Dres - ver 1c.jpg",
          "http://www.d3d.sk/images/oznamko-16.jpg",
          "http://www.d3d.sk/images/oznamko-17.jpg",
          "http://www.d3d.sk/images/Verzia4e.jpg",
          "http://www.d3d.sk/images/Svk-dres.jpg",
          "http://www.d3d.sk/images/Rool-up04bc.jpg",
          "http://www.d3d.sk/images/Senica-letak-maly.jpg",
          "http://www.d3d.sk/images/Merkur - dizajn - 4.jpg",
          "http://www.d3d.sk/images/Trades-world-2.jpg",
          "http://www.d3d.sk/images/web-1.jpg",
          "http://www.d3d.sk/images/web-3.jpg",
          "http://www.d3d.sk/images/web-5.jpg",
          "http://www.d3d.sk/images/web-7.jpg",
          "http://www.d3d.sk/images/web-8.jpg",
          "http://www.d3d.sk/images/web-10.jpg",
          "http://www.d3d.sk/images/web-11.jpg",
          "http://www.d3d.sk/images/vizitka.jpg"
        ];
    });
}());

样式

.appear.ng-enter {
    transition: 0.5s linear transform, 0.8s linear opacity;
    opacity: 0;
    transform: scale(0);
}

.appear.ng-enter.ng-enter-active {
    opacity: 1;
    transform: scale(1);
}

最佳答案

我相信他们改变了添加动画类的方式，现在如果一个数组已经用数据初始化它不会设置类 ng-enter，所以解决这个问题的唯一方法是将您的数组设置为空并添加一个轻微的超时。

/*global angular, console*/
var app = angular.module('portfolio', ['ngAnimate']);
(function() {
  "use strict";
  /* Gallery Controller */
  app.controller('galleryController', function(
    $scope,
    $timeout
  ) {
    $scope.pictures = [];

    $timeout(function() {
      $scope.pictures = [
        "http://www.d3d.sk/images/MK2_Granade_full.png",
        "http://www.d3d.sk/images/aberry-logo.jpg",
        "http://www.d3d.sk/images/logo-aberry.png",
        "http://www.d3d.sk/images/Crystal_balls.jpg",
        "http://www.d3d.sk/images/Purple_sun.jpg",
        "http://www.d3d.sk/images/planets.jpg",
        "http://www.d3d.sk/images/d3d.jpg",
        "http://www.d3d.sk/images/bpg-logo.png",
        "http://www.d3d.sk/images/Logo - Bukona.jpg",
        "http://www.d3d.sk/images/sky_up_fire.jpg",
        "http://www.d3d.sk/images/plexus.jpg",
        "http://www.d3d.sk/images/dch.jpg",
        "http://www.d3d.sk/images/Dimonsium-front-a.jpg",
        "http://www.d3d.sk/images/DWTS-3.jpg",
        "http://www.d3d.sk/images/Dwts-redesign-1.png",
        "http://www.d3d.sk/images/diplom.jpg",
        "http://www.d3d.sk/images/Genessis.jpg",
        "http://www.d3d.sk/images/Genessis - logo-final.jpg",
        "http://www.d3d.sk/images/Genessis - logo.jpg",
        "http://www.d3d.sk/images/Goholor.jpg",
        "http://www.d3d.sk/images/iron.jpg",
        "http://www.d3d.sk/images/bg_body3.jpg",
        "http://www.d3d.sk/images/bg_body4.jpg",
        "http://www.d3d.sk/images/lampa-2.png",
        "http://www.d3d.sk/images/MaxEnergy-design.jpg",
        "http://www.d3d.sk/images/North-first-2.jpg",
        "http://www.d3d.sk/images/North Side Dres - ver 1c.jpg",
        "http://www.d3d.sk/images/oznamko-16.jpg",
        "http://www.d3d.sk/images/oznamko-17.jpg",
        "http://www.d3d.sk/images/Verzia4e.jpg",
        "http://www.d3d.sk/images/Svk-dres.jpg",
        "http://www.d3d.sk/images/Rool-up04bc.jpg",
        "http://www.d3d.sk/images/Senica-letak-maly.jpg",
        "http://www.d3d.sk/images/Merkur - dizajn - 4.jpg",
        "http://www.d3d.sk/images/Trades-world-2.jpg",
        "http://www.d3d.sk/images/web-1.jpg",
        "http://www.d3d.sk/images/web-3.jpg",
        "http://www.d3d.sk/images/web-5.jpg",
        "http://www.d3d.sk/images/web-7.jpg",
        "http://www.d3d.sk/images/web-8.jpg",
        "http://www.d3d.sk/images/web-10.jpg",
        "http://www.d3d.sk/images/web-11.jpg",
        "http://www.d3d.sk/images/vizitka.jpg"
      ];
    })

  });
}());
/* gallery mosaic - grid */

.gallery {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
}

.gallery img {
  width: 100%;
  padding: 7px 0;
}

.appear {
  height: 150px;
  width: 150px;
  margin: 5px;
  background-color: red;
}


/* gallery mosaic - animate appearance  */

.appear.ng-enter {
  transition: 0.5s linear transform, 0.8s linear opacity;
  opacity: 0;
  transform: scale(0);
}

.appear.ng-enter.ng-enter-active {
  opacity: 1;
  transform: scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>

<body ng-app="portfolio">
  <div class="gallery" ng-controller="galleryController">
    <div class="appear" ng-repeat="picture in pictures"></div>
  </div>
</body>

显然，您可以将此超时更改为适合您的时间。

关于javascript - ngAnimate 在 AngularJS 1.6.4 中停止工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46174581/

javascriptAngularJSimages34httpcssng-animate

有关javascript - ngAnimate 在 AngularJS 1.6.4 中停止工作的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  3. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  4. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  5. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  6. ruby - JetBrains RubyMine 3.2.4 调试器不工作 - 2

    使用Ruby1.9.2运行IDE提示说需要gemruby​​-debug-base19x并提供安装它。但是，在尝试安装它时会显示消息Failedtoinstallgems.Followinggemswerenotinstalled:C:/ProgramFiles(x86)/JetBrains/RubyMine3.2.4/rb/gems/ruby-debug-base19x-0.11.30.pre2.gem:Errorinstallingruby-debug-base19x-0.11.30.pre2.gem:The'linecache19'nativegemrequiresinstall

  7. ruby - `rescue $!` 是如何工作的？ - 2

    我知道全局变量$!包含最新的异常对象，但我对下面的语法感到困惑。谁能帮助我理解以下语法？rescue$! 最佳答案 此构造可防止异常停止您的程序并使堆栈跟踪冒泡。它还会将该异常作为值返回，这很有用。a=get_me_datarescue$!在此行之后，a将保存请求的数据或异常。然后您可以分析该异常并采取相应措施。defget_me_dataraise'Nodataforyou'enda=get_me_datarescue$!puts"Executioncarrieson"pa#>>Executioncarrieson#>>#更现实的

  8. ruby - File.read ("| echo mystring") 是如何工作的？ - 2

    我在我正在处理的一些代码中发现了这一点。它旨在解决从磁盘读取key文件的要求。在生产环境中，key文件的内容位于环境变量中。旧代码:key=File.read('path/to/key.pem')新代码:key=File.read('|echo$KEY_VARIABLE')这是如何工作的？ 最佳答案 来自IOdocs:Astringstartingwith“|”indicatesasubprocess.Theremainderofthestringfollowingthe“|”isinvokedasaprocesswithappro

  9. ruby - 这个 ruby​​ 注入(inject)魔术是如何工作的？ - 2

    我今天看到了一个ruby​​代码片段。[1,2,3,4,5,6,7].inject(:+)=>28[1,2,3,4,5,6,7].inject(:*)=>5040这里的注入(inject)和之前看到的完全不一样，比如[1,2,3,4,5,6,7].inject{|sum,x|sum+x}请解释一下它是如何工作的？ 最佳答案 没有魔法，符号(方法)只是可能的参数之一。这是来自文档:#enum.inject(initial,sym)=>obj#enum.inject(sym)=>obj#enum.inject(initial){|mem

  10. ruby-on-rails - attr_accessible 在 Rails 中如何工作？ - 2

    我刚刚有一个关于RubyonRails和模型(Rails3)中的attr_accessible属性的一般性问题。有人可以解释应该在那里定义哪些模型属性吗？我记得一些关于批量分配风险的事情，虽然我在这方面不太了解......谢谢:) 最佳答案 想象一个带有一些字段的订单类:Order.new({:type=>'Corn',:quantity=>6})现在假设订单也有折扣代码，比如:price_off。您不想将:price_off标记为attr_accessible。这会阻止恶意代码制作最终会执行如下操作的帖子:Order.new({:

随机推荐