ngAnimate停止在AngularJS 1.6.4中工作 [英] ngAnimate stopped working in AngularJS 1.6.4
本文介绍了ngAnimate停止在AngularJS 1.6.4中工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
- > Runnable demo 就像魅力一样。
-> Runnable demo works like a charm.
- > 破碎的动画演示
-> Broken animation demo
未添加动画 css 类。控制台中没有错误。我不知道这里有什么不对。请注意， $ scope.pictures 是虚拟数据。
The animation css classes were not added. There is no error in console. I can't figure out whats wrong here. Please note that $scope.pictures is dummy data.
<!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申请
AngularJS Application
/*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"
];
});
}());
样式
Styles
.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 ，所以唯一的方法是设置你的数组为空并添加一点暂停。
I believe they changed the way the animation classes are added, now if an array is already initialised with data it won't set the class ng-enter, so the only way around this is to set your array to be empty and add a slight timeout.
/*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>
显然，你可以将此超时更改为适合您的时间。
Obviously, you can change this timeout to a time that what works for you.
这篇关于ngAnimate停止在AngularJS 1.6.4中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
