1.ts定义动画
@Component({
selector: 'app-cart-page',
templateUrl: './cartPage.page.html',
styleUrls: ['./cartPage.page.scss'],
animations: [
trigger('PayButton', [
state('payShow', style({
'transform': 'translateY(0)'
})),
state('payHide', style({
'transform': 'translateY(-200px)'
})),
transition('payShow <=> payHide', animate('0.5s')),
])
]
})
public payBtnState = 'payShow';
2.在要使用的div层上边加上动画名称
<div class="totalPrice" [@PayButton]="payBtnState">