Angular父div高度中的CSS过渡

Question

我正在使用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

Answer 1

尝试在过渡期间使用position：absolute而不是相对。