AngularJS-ui-Route: Übergang Animation nicht funktioniert

Winkel js Version: 1.5.6AngularJS-ui-Route: Übergang Animation nicht funktioniert

Ich versuche, Animation hinzufügen, wenn state geändert wird, aber die Dinge nicht gut laufen und ich bin um herauszufinden, nicht in der Lage, was los ist falsch. Bitte helfen Sie.

Was habe ich getan?

Es gibt 3 Registerkarten, wie Sie in dem Snipet sehen können, das ich beigefügt habe. Standard dort ist die Farbe gelb, aber wenn sie eingeben, möchte ich, dass die Farbe rot ist. So habe ich geschrieben das CSS:

.tab { 
    background-color: yellow; 
} 

.main{ 
    -webkit-transition: all 30s ease; 
    -moz-transition: all 30s ease; 
    transition: all 30s ease; 

    &.ng-enter{ 
     .tab{ 
      background-color: red; 
     } 
    } 

}

Dann bewarb ich mich main CSS auf der ui-Ansicht

<div ui-view ng-class="main"></div>

Whole-Code

var MyApp = angular 
 
    .module('MyApp', [ 
 
    'ui.router', 
 
    'ngAnimate' 
 
    ]) 
 
    .config(function($urlRouterProvider, $stateProvider) { 
 
    $stateProvider 
 
     .state('tab1', { 
 
     url: "/tab1", 
 
     template: `<div class="tab"> 
 
    <h3>Tab 1</h3> 
 
    my content 
 
</div>` 
 
     }) 
 
     .state('tab2', { 
 
     url: "/tab2", 
 
     template: `<div class="tab"> 
 
    <h3>Tab 2</h3> 
 
content of tab 2 
 
</div>` 
 
     }) 
 
     .state('tab3', { 
 
     url: "/tab3", 
 
     template: `<div class="tab"> 
 
    <h3>Tab 3</h3> 
 
tab 3 content 
 
</div>` 
 
     }); 
 

 
    $urlRouterProvider.otherwise('/tab1'); 
 

 
    });

.tab { 
 
    background-color: yellow; 
 
} 
 
.main { 
 
    -webkit-transition: all 30s ease; 
 
    -moz-transition: all 30s ease; 
 
    transition: all 30s ease; 
 
    &.ng-enter { 
 
    .tab { 
 
     background-color: red; 
 
    } 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="https://code.angularjs.org/1.5.6/angular.js"></script> 
 
    <script src="https://code.angularjs.org/1.5.6/angular-animate.js"></script> 
 
    <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-app="MyApp"> 
 
    <header> 
 
    <nav> 
 
     <a ui-sref="tab1">Tab 1</a> 
 
     <a ui-sref="tab2">Tab 2</a> 
 
     <a ui-sref="tab3">Tab 3</a> 
 
    </nav> 
 
    </header> 
 

 
    <div> 
 
    <div ui-view ng-class="main"></div> 
 
    </div> 
 

 
</body> 
 

 
</html>

Quelle

2016-06-02 Vikas Bansal

I‘ Ich habe s gefunden einige Fehler in Ihrem Code. Erstens, wenn Sie ng-class Direktive verwenden, sollten Sie Ausdruck verwenden, und Sie legen es einfach auf einen Klassennamen. Daher sollten Sie in diesem Fall das einfache Attribut class verwenden. Und auch du hast ein paar Fehler in deinem CSS. Es sieht wie less aus. Ich habe es korrigiert, wie folgt aus:

.tab { 
    background-color: yellow; 
} 
.main.ng-enter { 
    -webkit-transition: all 30s ease; 
    -moz-transition: all 30s ease; 
    transition: all 30s ease; 

} 

.main.ng-enter .tab{ 
     background-color: red; 
}

Sie sehen können Arbeitsbeispiel here. Im Beispiel setze ich transition-time gleich 1s für die Klarheit.

Quelle

2016-06-02 10:48:18

Könnten Sie bitte den Prozess ausarbeiten. Wie funktioniert das CSS? Ich weiß, dass ich nach mehr frage, aber es wird Noobs wie mir helfen. Vielen Dank Sergey. Vielen Dank. und du hast gesagt, dass mein css aussieht "weniger", was bedeutet das? : D :): P –

Auch, es funktioniert nur, wenn ich auf einen Link klicke. Wenn ich es per URL öffne, funktioniert es nicht. Hast du eine Idee? –

Erstens ist weniger Preprozessor für CSS. Ihre CSS-Codesyntax sieht weniger nach Syntax aus. Sie können mehr über weniger [hier] (http://lesscss.org/) erfahren. Zweitens, wenn Sie auf den Link klicken, erstellt angular ein neues '.main'' ui-view'-Element mit der 'ng-enter'-Klasse und fügt dem vorherigen Element die 'ng-leave'-Klasse hinzu und entfernt dann das vorherige Element. Hier ist ein weiteres [Beispiel] (https://jsbin.com/qiwicapeza/edit?html,css,js,output) für Sie. Sie können mehr über Animationen [hier] erfahren (https://docs.angularjs.org/guide/animations). Und drittens, ich denke, wenn Sie die Seite per Link angular öffnen fügt nicht "ng-enter" class ... –

AngularJS-ui-Route: Übergang Animation nicht funktioniert

Antwort

Verwandte Themen