2016-09-07 9 views
0

ページ遷移でスライド効果を作成するためにCSS遷移を使用しています。問題は、遷移した要素の位置を特定の位置に設定しても、包含するdivの高さが変わることです。私のCSSはこの角度の親divの高さでのCSSの遷移

.slide { 
    position: relative; 
    display: block; 
} 

.slide.ng-enter, 
.slide.ng-leave 
{ 
    -webkit-transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -moz-transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -ms-transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -o-transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
} 

.slide.ng-enter { 
    left: 100%; 
} 
.slide.ng-enter.slide.ng-enter-active { 
    left: 0; 
} 

.slide.ng-leave { 
    left: 0; 
} 
.slide.ng-leave.slide.ng-leave-active{ 
    left: -100%; 
} 

と私の見解ここ

<div class="row slide" ng-repeat="alert in pagedItems[currentPage]"> 
    <div class="col-md-12"> 
     {{alert.attributes.subject}} 
    </div> 
</div> 

であるように見える私のPlunker

答えて

0

位置使って試してみてください。代わりに、相対の遷移中に絶対に。

+0

具体的にすることも、プランナーを編集することもできますか?ありがとう –

+0

投稿したCSSの最初のスタイルルールを見てください。 –

+0

これにより、すべての行が互いに崩壊します。 –