Animation.cssを角度1.5.8で加工するには？

私はAngularJSに依存ngAnimateを追加しました：Animation.cssを角度1.5.8で加工するには？

var app=angular.module('testApp',['ngRoute', 'ngAnimate']);

と私はにアニメーションクラスを追加しました：

.slide-animation.ng-enter, .slide-animation.ng-leave { 
    -webkit-transition: 0.5s linear all; 
    -moz-transition: 0.5s linear all; 
    -o-transition: 0.5s linear all; 
    transition: 0.5s linear all; 
    position:relative; 
    height: 1000px; 
}

と頭の中で、このCSSファイルが含ま：

<head>    
    <link href="app/styles/animations.css" rel="stylesheet" type="text/css"/> 
</head>

を

私はindex.htmlファイルにこのクラスを使用しました：

<!doctype html> 
<html ng-app="testApp"> 
<head> 
    <title>Foo App</title>    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
       rel="stylesheet" type="text/css"/>  
    <link href="app/styles/animations.css" rel="stylesheet" type="text/css"/> 
</head> 
<body >   

    <div ng-view="" class="slide-animation"></div>  

    <script src="scripts/angular.js"></script> 
    <script src="scripts/angular-route.js"></script> 
    <script src="scripts/angular-animate.js"></script> 
    <script src="app/app.js"></script> 
    <script src="app/controllers/employeeController.js"> </script> 
    <script src="app/controllers/depController.js"></script> 
    <script src="app/services/employeeFactory.js"/></script> 
</body>

しかし、スライドアニメーションはありません。

私はこのtutorialを見ましたが、私の行動はファイルから使用されたアニメーションを取得するのと同じです。

私が逃したものは誰か知っていますか？

出典

2016-08-30 StepUp

は正しく追加されたクラスですか？ –

@HorstJahns私の見解では、 'class'が正しく追加されています。このコードスニペットでは十分ではありませんか？ – StepUp

scripts/angular-animate.jsが正しい場所にありますか？コンソールでいくつかのエラーがありましたか？ –

チェックになると思います。これを確認するには、すべてのブラウザのソースまたはネットワークパネルにあるファイルの有無を調べます。

angular-animate.jsというファイルがドキュメントに含まれていないので、ngAnimateというディレクティブが機能しないのはこのためです。

出典

2016-08-30 13:38:48

あなたはng-appが見つかりませんでした。 BODYまたはHTMLにng-app="app"を配置してください。と同様にdivにng-animateを配置します。

<body ng-app="app">  
    <div ng-view="" class="slide-animation" ng-animate="animate"></div> 
<body>

CSS：

.slide-animation { 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    min-height: 560px; 
} 
.slide-animation.ng-enter .ng-enter-active, .slide-animation.ng-leave { 
    -webkit-transition: 0.5s linear all; 
    -moz-transition: 0.5s linear all; 
    -o-transition: 0.5s linear all; 
    transition: 0.5s linear all; 
    position:relative; 
    height: 1000px; 
}

それから私は、scripts/angular-animate.jsがロードされている場合、それは作品

出典

2016-08-30 11:15:04

おっと、誤解を招いて申し訳ありません。しかし、私は 'ng-app'指令を持っています。私の更新された質問を見てください。 – StepUp

ng-animate = "'animate'"を試しましたか？ –

yeap、何も起こらない – StepUp

Animation.cssを角度1.5.8で加工するには？

答えて

関連する問題