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>

вот мой плункер