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

Question

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

我想将此实现为角度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'))
   ])
  ]
})

Answer 1

更新：Updated PLUNKER，android.opengl.EGLConfig使用animation

box-shadow

Answer 2

您可以使用CSS模仿此设计，尤其是伪元素。它没有使用任何JS，但如果你要添加多种颜色等可能需要它。

＆＃13;

＆＃13;

@ManyToOne

＆＃13;

.menu {
  height: 50px;
  width: 100%;
  background: lightgray;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}
.menu .button1 {
  position: absolute;
  top: 20%;
  left: 10px;
  height: 30px;
  width: 30px;
  background: tomato;
  cursor: pointer;
}
.menu .button1:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: tomato;
  transition: all 1s;
  height: 0;
  width: 0;
  cursor: initial;
}
.menu .button1:hover:before {
  height: 300vw;
  width: 300vw;
}

＆＃13;

＆＃13;

＆＃13;