Javascript 如何使用@angular/animations设置ScrollTop动画?
我正在尝试从Material.io复制此动画: 只需像上面示例中单击第一张卡那样导航高度很简单。只需设置高度属性的动画。问题在于点击第二张卡,然后将其他卡推开 一种解决方案是使用scroll模拟事物被推开的效果。因此,当您单击该项目时,它不仅通过设置高度动画使其更高,而且还同时滚动视图 我的问题是: 我似乎不知道如何使用Javascript 如何使用@angular/animations设置ScrollTop动画?,javascript,angular,css-animations,angular-animations,Javascript,Angular,Css Animations,Angular Animations,我正在尝试从Material.io复制此动画: 只需像上面示例中单击第一张卡那样导航高度很简单。只需设置高度属性的动画。问题在于点击第二张卡,然后将其他卡推开 一种解决方案是使用scroll模拟事物被推开的效果。因此,当您单击该项目时,它不仅通过设置高度动画使其更高,而且还同时滚动视图 我的问题是: 我似乎不知道如何使用@angular/animations为卷轴设置动画。 我不能使用样式({scrollTop:100}),它只允许根据样式设置CSS属性 我如何做到这一点?如果出于维护原因(将
@angular/animations
为卷轴设置动画。
我不能使用样式({scrollTop:100})
,它只允许根据样式设置CSS属性
我如何做到这一点?如果出于维护原因(将整个动画保留在代码中的一个位置),我可以将其作为
animate()
动画的一部分,那就太好了,但是如果只能使用单独的方法,我想这也是可以接受的。我成功地创建了它,使用了三种角度动画状态:小、大和正常,与div的高度相对应:
动画。ts
import { expand } from './animations';
@Component({
...
animations: [expand]
})
export class AppComponent implements OnInit {
expandState1 = 'normal';
expandState2 = 'normal';
expandState3 = 'normal';
expandState4 = 'normal';
expandState5 = 'normal';
ngOnInit() {
this.resetStates();
}
resetStates() {
this.expandState1 = 'normal';
this.expandState2 = 'normal';
this.expandState3 = 'normal';
this.expandState4 = 'normal';
this.expandState5 = 'normal';
}
toggleShowDiv(divName: string) {
if (divName === 'div1') {
if (this.expandState1 === 'normal' || this.expandState1 === 'small') {
this.setToBig([1]);
this.setToSmall([2, 3, 4, 5]);
} else if (this.expandState1 === 'big' || this.expandState1 === 'small') {
this.resetStates();
}
} else if (divName === 'div2') {
if (this.expandState2 === 'normal' || this.expandState2 === 'small') {
this.setToBig([2]);
this.setToSmall([1, 3, 4, 5]);
} else if (this.expandState2 === 'big') {
this.resetStates();
}
} else if (divName === 'div3') {
if (this.expandState3 === 'normal' || this.expandState3 === 'small') {
this.setToBig([3]);
this.setToSmall([1, 2, 4, 5]);
} else if (this.expandState3 === 'big') {
this.resetStates();
}
} else if (divName === 'div4') {
if (this.expandState4 === 'normal' || this.expandState4 === 'small') {
this.setToBig([4]);
this.setToSmall([1, 2, 3, 5]);
} else if (this.expandState4 === 'big') {
this.resetStates();
}
} else if (divName === 'div5') {
if (this.expandState5 === 'normal' || this.expandState5 === 'small') {
this.setToBig([5]);
this.setToSmall([1, 2, 3, 4]);
} else if (this.expandState5 === 'big') {
this.resetStates();
}
}
}
setToSmall(choices: any) {
for (let i = 0; i < choices.length; i++) {
switch (choices[i]) {
case 1:
this.expandState1 = 'small';
break;
case 2:
this.expandState2 = 'small';
break;
case 3:
this.expandState3 = 'small';
break;
case 4:
this.expandState4 = 'small';
break;
case 5:
this.expandState5 = 'small';
break;
default:
break;
}
}
}
setToBig(choices: any) {
for (let i = 0; i < choices.length; i++) {
switch (choices[i]) {
case 1:
this.expandState1 = 'big';
break;
case 2:
this.expandState2 = 'big';
break;
case 3:
this.expandState3 = 'big';
break;
case 4:
this.expandState4 = 'big';
break;
case 5:
this.expandState5 = 'big';
break;
default:
break;
}
}
}
}
这里,我以每个div使用一个状态变量为例,默认情况下,我将这些状态中的每一个设置为normal。
然后,根据我点击哪个div,我根据我们想要发生的事情来切换状态:使我们点击的div变大,其他的变小
应用程序组件.ts
import { expand } from './animations';
@Component({
...
animations: [expand]
})
export class AppComponent implements OnInit {
expandState1 = 'normal';
expandState2 = 'normal';
expandState3 = 'normal';
expandState4 = 'normal';
expandState5 = 'normal';
ngOnInit() {
this.resetStates();
}
resetStates() {
this.expandState1 = 'normal';
this.expandState2 = 'normal';
this.expandState3 = 'normal';
this.expandState4 = 'normal';
this.expandState5 = 'normal';
}
toggleShowDiv(divName: string) {
if (divName === 'div1') {
if (this.expandState1 === 'normal' || this.expandState1 === 'small') {
this.setToBig([1]);
this.setToSmall([2, 3, 4, 5]);
} else if (this.expandState1 === 'big' || this.expandState1 === 'small') {
this.resetStates();
}
} else if (divName === 'div2') {
if (this.expandState2 === 'normal' || this.expandState2 === 'small') {
this.setToBig([2]);
this.setToSmall([1, 3, 4, 5]);
} else if (this.expandState2 === 'big') {
this.resetStates();
}
} else if (divName === 'div3') {
if (this.expandState3 === 'normal' || this.expandState3 === 'small') {
this.setToBig([3]);
this.setToSmall([1, 2, 4, 5]);
} else if (this.expandState3 === 'big') {
this.resetStates();
}
} else if (divName === 'div4') {
if (this.expandState4 === 'normal' || this.expandState4 === 'small') {
this.setToBig([4]);
this.setToSmall([1, 2, 3, 5]);
} else if (this.expandState4 === 'big') {
this.resetStates();
}
} else if (divName === 'div5') {
if (this.expandState5 === 'normal' || this.expandState5 === 'small') {
this.setToBig([5]);
this.setToSmall([1, 2, 3, 4]);
} else if (this.expandState5 === 'big') {
this.resetStates();
}
}
}
setToSmall(choices: any) {
for (let i = 0; i < choices.length; i++) {
switch (choices[i]) {
case 1:
this.expandState1 = 'small';
break;
case 2:
this.expandState2 = 'small';
break;
case 3:
this.expandState3 = 'small';
break;
case 4:
this.expandState4 = 'small';
break;
case 5:
this.expandState5 = 'small';
break;
default:
break;
}
}
}
setToBig(choices: any) {
for (let i = 0; i < choices.length; i++) {
switch (choices[i]) {
case 1:
this.expandState1 = 'big';
break;
case 2:
this.expandState2 = 'big';
break;
case 3:
this.expandState3 = 'big';
break;
case 4:
this.expandState4 = 'big';
break;
case 5:
this.expandState5 = 'big';
break;
default:
break;
}
}
}
}
下面是我为此制作的StackBlitz示例:
<div class="wrapper scrollableDiv">
<div [@expand]="expandState1" (click)="toggleShowDiv('div1')" class="content divA">THIS IS CONTENT DIV 1</div>
<div [@expand]="expandState2" (click)="toggleShowDiv('div2')" class="content divA">THIS IS CONTENT DIV 2</div>
<div [@expand]="expandState3" (click)="toggleShowDiv('div3')" class="content divA">THIS IS CONTENT DIV 3</div>
<div [@expand]="expandState4" (click)="toggleShowDiv('div4')" class="content divA">THIS IS CONTENT DIV 4</div>
<div [@expand]="expandState5" (click)="toggleShowDiv('div5')" class="content divA">THIS IS CONTENT DIV 5</div>
</div>