Angularjs-ui-route: анимация перехода не работает

Question

Angularjs-ui-route: анимация перехода не работает

0

угловая версия js: 1.5.6

Я пытаюсь добавить анимацию, когда 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-view

<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>

Vikas Bansal 02 июнь 2016, в 11:45

Источник

Теги:

javascript

angularjs

css

angular-ui-router

css-animations

1 ответ

Ещё вопросы

Sergey Tyupaev · Accepted Answer · 2016-06-02T09-39-00.000Z

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

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

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

Не могли бы вы уточнить процесс. как работает этот css? Я знаю, что прошу большего, но это поможет новичкам, как я. Большое спасибо Сергей .. большое спасибо. а ты сказал, что мой css выглядит less , что это значит? : D :): P
Кроме того, это работает, только если я нажимаю на ссылку. Если я открою его по URL, то он не будет работать. у тебя есть идеи?
Во-первых, чем меньше препроцессор для CSS. Ваш синтаксис кода CSS выглядит меньше синтаксиса. Вы можете узнать больше о меньшем здесь . Во-вторых, когда вы нажимаете на ссылку, angular создает новый .main ui-view с классом ng-enter а к предыдущему элементу добавляет класс ng-leave .main , а затем удаляет предыдущий элемент. Вот еще один пример для вас. Вы можете узнать больше об анимации здесь . И в-третьих, я думаю, что когда вы открываете страницу по ссылке angular не добавляет ng-enter class ...
Последний вопрос: не могли бы вы мне сказать, можно ли показать переход анимации при изменении URL-адреса, введя URL-адрес в адресную строку (как это происходит при нажатии ссылки), поскольку анимация не работает, если я изменяю URL-адрес из адресной строки? , Большое спасибо за все.
Ну, я пытался найти что-то, но я наткнулся на них . Кажется, невозможно достичь того, что вы хотите сделать ...
ты уже много сделал для меня Большое спасибо. и если я найду что-нибудь связанное, я обязательно сообщу вам