Question

问题：动画在角粒种子项目中不起作用。我做了什么：

我从github那里获取了角种子。
在种子项目中有两个视图，view1.html和view2.html通过路由与相应的控制器很好地连接。
我用最简单的CSS-transission动画取代了view1。（在另一个项目中工作正常）
在View1的脚本中，我注入了＆＃39; ngAnimate＆＃39;像这样的模块： var animation3App = angular.module（＆＃39; animation3＆＃39;，[＆＃39; ngAnimate＆＃39;]）;
我向bower.json添加＆＃34; angular-animate＆＃34;：＆＃34; 1.2.x＆＃34;，并运行bower install。我验证了将角度动画添加/安装到bower_components目录。
要index.html我在angular-route和app.js之间添加这条线，如下所示： ... SRC =＆＃34; bower_components /角动画/角animate.js＆＃34; ...

动画：两个相互叠加，单击一个应该将其不透明度设置为0，其他（将其下方设置为1）从而将图像从一个更改为另一个，花费时间，1秒，更改不透明度给出＆＃34;合并＆＃34;影响。

当导航到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>

Answer 1

我解决了！动画的CSS中存在错误。我在问题中描述的6个步骤都是正确的。我的问题与角种子无关。

解决方案：我把CSS更改为：（确切地说哪个部分是我不知道的关键部分，因为我正在以角度学习动画）

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
    -webkit-transition:all 1.7s;
    transition:all 1.7s;
}
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove{
    opacity:0;
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
}

无法在新的角度种子项目中使用ngAnimate

1 个答案: