css – 如何创建Material Design径向反应动画

我希望我的工具栏使用材料设计径向反应编排指南来改变颜色

我想将其作为一个有角度的2过渡实现,但我不知道如何做到这一点：

它看起来像这样……

@Component({
 ...
  animations: [
    trigger('heroState',[
    state('inactive',style({
      backgroundColor: '#eee',transform: 'scale(1)'
     })),state('active',style({
       backgroundColor: '#cfd8dc',transform: 'scale(1.1)'
     })),transition('inactive => active',animate('100ms ease-in')),transition('active => inactive',animate('100ms ease-out'))
   ])
  ]
})

解决方法

更新： Updated PLUNKER,使用Box-shadow动画

@Component({
  selector: 'my-app',template: `
    <div class="head" [@mtSlide]="activeSlide == 1 ? 'active': 'inactive'">
      <input id="searchBar" type="search" [@mtTranslate]="activeSlide == 2 ? 'active': 'inactive'">

      <i class="fa fa-bars" [@mtRotate]="activeSlide == 1 ? 'active': 'inactive'" (click)="menuopen()" [style.z-index]="activeSlide == 1 ? 1 : 0"></i>
      <i class="fa fa-arrow-left" [@mtRotate]="activeSlide == 2 ? 'active': 'inactive'" (click)="activeSlide = 1" [style.z-index]="activeSlide == 2 ? 1 : 0"></i>

      <i class="fa fa-search" [@mtScale]="activeSlide == 1 ? 'active': 'inactive'" style="right:10px; left: initial;"  (click)="activeSlide = 2"></i>
    </div>
  `,animations: [
    trigger('mtSlide',style({
      'Box-shadow': 'rgb(0,102,255) 0px 0px 0px 0px inset,rgb(0,0) 0px 2px 8px -3px'
    })),255) 100vw 0px 0px 0px inset,transition('inactive <=> active',animate('200ms ease-out'))
    ]),trigger('mtTranslate',style({
      transform: 'translateX(100%)'
    })),style({
      transform: 'translateX(0)'
    })),trigger('mtRotate',style({
      transform: 'rotateZ(-90deg)'
      opacity: 0;
    })),style({
      transform: 'rotateZ(0)';
      opacity: 1;
    })),animate('300ms ease-out'))
    ]),trigger('mtScale',style({
      transform: 'scale(0)'
    })),style({
      transform: 'scale(1)';
    })),animate('400ms ease-out'))
    ])],styles: [`
    * {
      Box-sizing: border-Box;
    }

    .head {
      position: relative;
      font-size: 18px;
    }

    .head,.color-bar,.head > input {
      width: 100%;
      height: 50px;
    }

    .head i,.head > input{
      position: absolute;
    }

    .head i {
      line-height: 50px;
      cursor: pointer;
      color: white;
      padding: 0 10px;
      width: 50px;
      text-align: center;
      left: 10px;
    }

    .head i.fa-arrow-left {
      color: #111;
    }

    .head > input {
      border: 0;
      outline: 0;
      padding-left: 50px;
    }
  `]
})
export class App {
  activeSlide = 1;

  menuopen() {
    alert('Menu Clicked');
  }
}