Как сделать вид AngularJs, ввести анимацию

Я пытаюсь создать слайд-анимацию, когда представление отображается в угловом приложении, аналогичном этот образец

Вот мое приложение http://plnkr.co/edit/nO7mfjx5iOUUyB0tZwIq?p=preview . Я скопировал все классы css из примера, но не могу заставить анимацию работать. Любые идеи?


html angularjs ng-animate
person Satish    schedule 10.04.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел некоторую проблему в вашем стиле CSS, я изменяю его следующим образом:

.view-enter.ng-enter, .view-enter.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}

.view-enter.ng-enter {
  opacity:1;
  left:100px;
  width:100%;
  position:absolute;
}
.view-enter.ng-enter-active {
  left:0;
  opacity:1;
}

.view-enter.ng-leave {
  position:absolute;
  left:0;
  width:100%;
  opacity:0;
}
.view-enter.ng-leave-active {
  left:-100px;
  opacity:0;
}

В вашем html-файле вы должны добавить класс в свой элемент директивы ng-view, например:

<div ng-view class="view-enter"></div>
person smallg    schedule 10.04.2014
comment
также вы можете ознакомиться с документацией по ng-view. code.angularjs.org/1.2.14/docs/api/ ngRoute/директива/ngView - person smallg; 10.04.2014