我希望我的工具栏使用材料设计径向反应编排指南来改变颜色
我想将其作为一个有角度的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');
}
}
