Animation by CSS order is not working in Angular animation

Question

I'm trying to animate with angular query with the following code and when I hit "Hit me" button on the webpage, the page stays the same without any animation.

EXPECT: When clicking "Hit me" button, HAHA and HOHO should switch its places

OUTPUT: When clicking "Hit me" button, no change happened

Does anyone know how I can animate the order of elements in horizontal manner?

CODE

import { Component, AfterViewInit, Output, ViewChild, ElementRef } from '@angular/core';
import {trigger, query, state, transition, style, animate} from '@angular/animations';

@Component({
  selector: 'yaxis-component',
  //templateUrl: './yaxis.component.html',
  template: `
  <div style="display: flex;" [@state] = "stateName">
    <h1 style='order: 1'  class="AAA"> HAHA </h1>
    <h1 style='order: 2'  class="BBB"> HOHO </h1>
    <button type="button" (click)="toggle()">Hit me</button>
  </div>
  `,
  styleUrls: ['./yaxis.component.scss'],
    animations: [
    trigger('state', [
      transition('show => hide', query('.AAA', [
        animate(300, style({order: 1}))      
      ])),
      transition('show => hide', query('.BBB', [
        animate(300, style({order: 2}))      
      ])),
      transition('hide => show', query('.AAA', [
        animate(300, style({order: 2}))      
      ])),
      transition('hide => show', query('.BBB', [
        animate(300, style({order: 1}))      
      ]))
    ])
  ]
})
export class YaxisComponent  {
  show = false;
  get stateName() {return this.show ? 'show' : 'hide'}
  toggle() {this.show = !this.show;}
  constructor() {}
}

test.component.scss is empty.