私はangularJS v1.2でangular-ui-routerを使用しており、カスタムページ遷移を実装したいと考えています。
ng-animateをui-viewで使用するにはどうすればいいですか（角度付きUIルーター）ではなく、ng-view（これが標準的な方法）を使用する方法はありますか？AngularJS 1.2 のリマスターされたアニメーションng-view の参考用です。
編集: コメントで提案されているように、Angular の 2 つの異なるバージョン (v1.2.0-rc.2 と v1.2.0-rc.3) を試しましたが、どちらもうまくいかないようです。何か間違っているのでしょうか?
HTML は次のとおりです:
<div ui-view class="slide"></div>
そしてCSS:
.slide {
width:1024px;
height:768px;
}
.slide.ng-enter,
.slide.ng-leave {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
border: 1px solid blue;
}
.slide.ng-enter.ng-enter-active {
border: 1px solid red;
}
私は追加しましたJSフィドル前述の例の。この例を ng-view と ui-view まで拡張できればよいのですが、ng/ui-view と部分を JSfiddle に取り込む方法がわかりません。
ベストアンサー1
バグは解決され、ui-routerにエントリが追加されました。ウィキデモも含まれていますプランクURL が古くなる場合に備えて、コード例をここにコピーします。
HTML:
<div class="row">
<div class="span12 ui-view-container">
<div class="well" ui-view></div>
</div>
</div>
CS: ...
/* 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);
}