0

問題: angular-seed プロジェクトでアニメーションが機能しません。私がしたこと：

  1. angular-seed を github から取得しました。
  2. シード プロジェクトには、view1.html と view2.html の 2 つのビューがあり、対応するコントローラーとのルートを介して適切に接続されています。
  3. view1 を最も単純な CSS トランジションであるアニメーションに置き換えます。（別のプロジェクトではうまくいきます）
  4. View1 のスクリプトでは、次のように「ngAnimate」をモジュールに挿入します。 var animation3App = angular.module('animation3', ['ngAnimate']);
  5. "angular-animate": "1.2.x" を bower.json に追加し、bower install を実行します。angular-animate が bower_components ディレクトリに追加/インストールされたことを確認します。
  6. index.html に、次のように angular-route と app.js の間に次の行を追加します: ...src="bower_components/angular-animate/angular-animate.js"...

アニメーション: 2 つが重なり合っており、1 つをクリックすると不透明度が 0 になり、他のもの (下にあるもの) は 1 になり、不透明度を変更するのに 1 秒かかります。 「マージ」効果を与えます。

index.html ルーティングに移動すると、view1.html が得られます。これが angular-seed のルーティング方法です。それには触れませんでした。angular-seed プロジェクトでない場合は完全に機能するアニメーションが機能しません。画像は入れ替えられますが、アニメーション効果はありません。

ブラウザの 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>
4

1 に答える 1

0

解決しました！アニメーションの CSS にエラーがありました。質問で説明した 6 つの手順はすべて正しかったです。私の問題は、angular-seed とは何の関係もありませんでした。

解決策: CSS を次のように変更しました: (Angular でアニメーションを学習しているため、正確にはどの部分が重要なのかはまだわかりません)

.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;
}
于 2014-09-18T09:49:08.457 に答える