CSS转换在Angular父div高度

Question

为了在分页中创建滑动效果，我使用了css transition。问题是，即使我将过渡元素的位置设置为特定位置，包含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%;
}

and my view

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

这是我的普朗克

Answer 1

尝试在过渡期间使用position:absolute而不是relative。