Анимация кнопки в angular 4

Второй день мучаюсь, никак не могу сделать правильную анимацию, как здесь https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js пробовал сделать анимацию каждой div через query(), но что-то не выходит, вот код .ts

trigger('menuAnimate',[
        state('off', style({
            transform: 'scale(1)',
        })),
        state('on', style({
            transform: 'scale(1.2)',
        })),
            transition('off => on', animate(500)),
        ]),
    trigger('barAnimate', [
        transition("off => on", [
            group([
                query(".bar1", [
                    animate(500, style({
                      transform: "rotate(-45deg) translate(-9px, 6px)"
                    }))
                  ], { optional: true }), 
                query(".bar2", [
                    animate(500, style({
                      transform: "opacity 0"
                    }))
                  ], { optional: true }),
                query(".bar3", [
                    animate(500, style({
                      transform: "rotate(45deg) translate(-8px, -8px)"
                    }))
                  ], { optional: true }),
              ])
          ])
      ])
  ]

код .html

<div class = 'col-md-12'>
                <h1>{{logo}}</h1>
                <a class="container col-md-1 col-md-push-11" [@menuAnimate] = 'off' href = '#' (click) = 'menuAnimate()'>
                    <div class="bar1" [@barAnimate] = 'off' ></div>
                    <div class="bar2" [@barAnimate] = 'off' ></div>
                    <div class="bar3" [@barAnimate] = 'off' ></div>
                </a>
                <h2 class = 'text-center'>{{slogan}}</h2>
            </div>

Подскажите пожалуйста, что я делаю неправильно.