如何在 Ionic 框架的 ui-view 指令中使用动画答案

【问题标题】：how to use animation with Ionic framework's ui-view directive如何在 Ionic 框架的 ui-view 指令中使用动画
【发布时间】：2014-11-12 13:49:15
【问题描述】：

我正在使用 Ionic 框架我有一个 Shell 页面（主索引页面），它将显示一些视图，这些视图我想在 Shell 页面内显示动画。我的意思是当视图将显示在 shell 页面中时，它需要是动画的。我正在使用这些代码为我的视图设置动画，这工作正常，但是否有任何内置支持可用于为 ui-view 设置动画。???

<div class="row">
   <div class="span12 ui-view-container">
      <div class="well" ui-view></div>        
   </div>
</div>

这是 css：我是从 stackoverflow 复制粘贴的

/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/
.well[ui-view]{
 height: 65px; 
}

.ui-view-container {
  position: relative;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

[ui-view].ng-enter {
  opacity: 0;
  -webkit-transform:scale3d(0.5, 0.5, 0.5);
  -moz-transform:scale3d(0.5, 0.5, 0.5);
  transform:scale3d(0.5, 0.5, 0.5);
}

[ui-view].ng-enter-active {
  opacity: 1;
  -webkit-transform:scale3d(1, 1, 1);
  -moz-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1);
}

[ui-view].ng-leave {
  opacity: 1; 
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave-active {
  opacity: 0;
  -webkit-transform:translate3d(100px, 0, 0);
  -moz-transform:translate3d(100px, 0, 0);
  transform:translate3d(100px, 0, 0);
}

【问题讨论】：

标签： angularjs animation ionic-framework

【解决方案1】：

尝试使用ion-nav-view 而不是ui-view：

http://ionicframework.com/docs/api/directive/ionNavView/

【讨论】：