Angularjs-щ-маршрут: анимация перехода не работает

угловая JS версия: 1.5.6Angularjs-щ-маршрут: анимация перехода не работает

Я пытаюсь добавить анимацию при state изменяется, но дела не идут хорошо, и я не в состоянии понять, что происходит неправильно. Пожалуйста помоги.

Что я наделал?

Есть 3 вкладки, как вы можете видеть в snipet, который я приложил. По умолчанию там цвет желтый, но когда они входят, я хочу, чтобы цвет был красным. Так что я написал этот 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; 
     } 
    } 

}

Тогда я применил main CSS на Ui ракурса

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

Всего Код

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>

источник

2016-06-02 Vikas Bansal

I» вы нашли s ome ошибки в вашем коде. Во-первых, когда вы используете директиву ng-class, вы должны использовать выражение, и вы просто установите его для имени класса. Поэтому в этом случае вы должны использовать простой атрибут class. А также у вас есть некоторые ошибки в вашем css. Это выглядит как less. Я поправил его, как это:

.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; 
}

Вы можете увидеть работающий пример here. В примере я положил transition-time равным 1 с для ясности.

источник

2016-06-02 10:48:18

Не могли бы вы рассказать о процессе. как работает этот css? Я знаю, что я прошу большего, но это поможет noobs, как я. Большое спасибо Сергею. Большое спасибо. и вы сказали, что мой css выглядит как «меньше», что это значит? : D :): P –

Кроме того, он работает, только если я нажму ссылку. Если я открою его по URL-адресу, это не сработает. У тебя есть идея? –

Во-первых, меньше препроцессор для css. Синтаксис вашего кода CSS выглядит как меньше синтаксиса. Вы можете узнать больше об меньшем [здесь] (http://lesscss.org/). Во-вторых, когда вы нажимаете на ссылку, угловой создает новый элемент '.main'' ui-view' с классом 'ng-enter', а предыдущему элементу добавляется класс' ng-leave', а затем удаляется предыдущий элемент. Вот еще один пример (https://jsbin.com/qiwicapeza/edit?html,css,js,output) для вас. Вы можете узнать больше об анимациях [здесь] (https://docs.angularjs.org/guide/animations). И, в-третьих, я думаю, что когда вы открываете страницу по ссылке, угловой не добавляет класс 'ng-enter' ... –

Angularjs-щ-маршрут: анимация перехода не работает

ответ

Смежные вопросы