CODEWITHSUNDEEP
cssangularjscss-animationsng-animate
Alan
Alan

Reputation: 1134

How to delay transition until previous one has completed. (ng-show)

I have a series of div tags that contain information about an specific section. There can only be one div block visible at a time, and in order to accomplish this I have an ng-show statement that bases the condition on a currently set name. My markup looks similar to this.

.infoBlock {
  transition: all .2s linear;
  width: 100%;
  height: auto;
}
.infoBlock.ng-hide {
  opacity: 0;
}
<div class="infoBlock" ng-show="selectedCategory == 'name1'">
  <p>
    ...some text
  </p>

</div>


<div class="infoBlock" ng-show="selectedCategory == 'name2'">
  <p>
    ...some text
  </p>

</div>

The problem is that since the div's take the place of the previously shown one, a div that is about to be shown appears before the current one has a chance to disappear.

I have tried to set a transition-delay on the .infoBlock class but that did not solve the problem, and I cannot use setTimeout() whenever I set selectedCategory because it would have no effect since the same variable controls the appearance of both blocks.

Upvotes: 1

Views: 1058

Answers (1)

Valentyn Shybanov
Valentyn Shybanov

Reputation: 19391

You can play a trick with ng-hide-animate and ng-hide-remove-active classes:

    .infoBlock.ng-hide-remove-active {
       transition-delay: 0.4s;
    }
    .infoBlock.ng-hide-animate {
       position:absolute;
    }

Plunker: http://plnkr.co/edit/w0SIch3yIHuWldyonMLF

Upvotes: 2

Related Questions