Max-height transition is only working in one direction

I'm trying to implement a FAQ - therefore I want the answer to slide down on click. To achieve this effect I use max-height. But somehow the transition solely works closing the question again. On first reveal, there's no transition.

<div class="row mt-5">
  <div class="col-12" *ngFor="let question of questions; let i = index" (click)="selectedQuestion !== i ? selectedQuestion = i : selectedQuestion = -1">
    <div class="question-container py-4 h-100 w-100 border-bottom">
      <p class="mr-4">0{{i + 1}}</p>
      <p>{{question}}</p>
      <div class="answer-container" [class.answer-closed]="selectedQuestion !== i">
        <p>This is an answer!</p>
      </div>
    </div>
  </div>
</div>

  width: 100%;
  background-color: white;
  overflow: hidden;
  max-height: 500px;
  transition: max-height .5s cubic-bezier(0, 1, 0.5, 1);
}

.answer-closed {
  max-height: 0;
}

A working stackblitz.