Проблема: анимация не работает в проекте с угловым посевом. Что я сделал:Не удается заставить ngAnimate работать в новом проекте с угловым посевом
- Я достал угловое семя из github.
- В проекте seed есть два вида, view1.html и view2.html прекрасно связаны с маршрутом с соответствующими контроллерами.
- Я заменяю view1 своей простой CSS-трансляцией, анимацией. (который отлично работает в другом проекте)
- В скрипте View1 я добавляю 'ngAnimate' к модулю следующим образом: var animation3App = angular.module ('animation3', ['ngAnimate']);
- Я добавляю «углово-оживляемый»: «1.2.x», в bower.json и запускает установку бара. Я проверяю, что угловой анимат добавлен/установлен в каталог bower_components.
- Чтобы index.html добавить эту линию только между угловым маршрутом и app.js как это: ... SRC = «bower_components/угловой одушевленным/угловым animate.js» ...
Анимация: Два друг над другом, нажатие на одно должно поместить его непрозрачность в 0, остальные (то есть под 1), таким образом изменяя изображение от одного к другому, отнимая время, 1 секунду, чтобы изменить непрозрачность дает эффект «слияния».
При переходе на index.html маршрутизация дает мне view1.html, вот как пробивается угловое семя, я не касался этого. Анимация, которая отлично работает, если не в проекте с угловыми затратами, не работает. Образы заменяются, но без эффекта анимации.
У меня нет предупреждений или ошибок в инструменте F12 браузера. Есть ли способ отладить это с помощью batarang?
Весь view1.html со скриптом внутри него для простоты:
<!DOCTYPE html>
<html ng-app="animation3">
<head lang="en">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="animation3Ctrl">
<style>
#image-container {
position: relative;
width: 200px;
height: 200px;
}
.image-back{
position: absolute;
top: 25px;
left: 25px;
width: 150px;
height: 150px;
border: 1px lightcoral solid;
}
.image-front{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: auto; /*height: 200px;*/
border: 1px lightcoral solid;
}
.animate-show {
opacity:1;
}
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
-webkit-transition:all 1.7s;
transition:all 1.7s;
}
.animate-show.ng-hide {
opacity:0;
}
</style>
<pre>
This is view1.
Click on Image to see animation.
This HTML works perfectly well on it's own, but NOT inside this angular-seed project.
</pre>
<div id="image-container">
<img class="image-front animate-show"
ng-src="./img/{{photo.imgFront}}"
ng-click="flipPhoto()"
ng-show="frontShown">
<img class="image-back animate-show"
ng-src="./img/{{photo.imgBack}}"
ng-click="flipPhoto()"
ng-hide="frontShown">
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular-animate.js"></script>
<script>
var animation3App = angular.module('animation3', ['ngAnimate']);
animation3App.controller('animation3Ctrl', ['$scope',
function ($scope) {
$scope.photo = {
imgBack: 'proXoftLogo.png',
imgFront: 'donaldBlack.jpg'
}
$scope.flipPhoto = function flipPhoto(){
$scope.frontShown = !$scope.frontShown;
}
}]);
</script>
</body>
</html>