Блог

У меня есть следующая анимация:

 @Component({
  ...
  animations: [
        trigger('fade', [
          transition(':enter', [
              style({'width': '0' }),
              animate(300, style({'width': '?'})) // responsive width here what can I do?
          ]),
          transition(':leave', [
              animate(200, style({'width': '0px'}))
          ])
    
      ])
      ]
})
  

и html-код:

 <div class="detail" *ngIf="hasPost" [@fade]>
    <app-post-detail></app-post-detail>
</div>
  

Итак, мне вообще интересно, как настроить анимацию, когда отвечает ширина или высота просто неизвестна, потому что в приведенном выше примере div с классом detail имеет разные размеры ширины:

 .detail {
    position: fixed;
    top: 0;
    right: 0;
    background-color: white;
    border-left: 1px solid white;
    width: 35%;
    height:100%;
    z-index: 20;
}

@media only screen and (max-width: 700px){
    .detail{
        width: 50%;
    }
    
}
  

Что бы я здесь сделал? Я попытался установить ширину на auto, но тогда анимация выглядит ужасно. Я должен передать правильную ширину, чтобы анимация работала, но что, если я не знаю точной ширины или высота просто неизвестна?

Вместо числа для ширины укажите *, как показано ниже

 @Component({
  ...
  animations: [
        trigger('fade', [
          transition(':enter', [
              style({'width': '*' }),
              animate(300, style({'width': '*'})) // responsive width here what can I do?
          ]),
          transition(':leave', [
              animate(200, style({'width': '*'}))
          ])
    
      ])
      ]
})