当正在执行一个使用了动画的组件时,动画正在执行,同样动画的状态是display none,
显示这个动图:
当打开组件时模态中的动画很明显,我想要的不是这个。
请帮帮我!!
组件.ts
trigger('openModal', [
state('true', style({
display: 'block',
'transform': 'scale(1)'
})),
state('false', style({
display: 'none',
'transform': 'scale(0)'
})),
transition('* => *', animate('.2s'))
]),
openCancelFavorite: boolean = false;
组件.html
<div [@openModal]="openCancelFavorite" class="onbusca-favorite-remove">
<div class="row onbusca-row">
<div class="ml-auto col-auto">
<i (click)="openCancelFavorite = false" class="fa fa-close onbusca-login-close"></i>
</div>
</div>
<p class="not-p onbusca-favorite-remove-message">Você tem certeza que quer remover este produto dos favoritos ?</p>
<div class="onbusca-favorite-buttons">
<button class="btn btn-primary">Sim, remova</button>
<button (click)="openCancelFavorite = false" class="btn btn-outline-primary">Cancelar</button>
</div>
</div>
最佳答案
我相信您只需将类的显示默认设置为无即可。
所以添加display: none;到 onbusca-favorite-remove
.onbusca-favorite-remove {
display: none;
}
否则,您可以像这样在 *ngIf 上切换动画:
将动画更改为:
trigger('openModal', [
state(':enter', style({
display: 'block',
'transform': 'scale(1)'
})),
state(':leave', style({
display: 'none',
'transform': 'scale(0)'
})),
transition('* => *', animate('.2s'))
]),
openCancelFavorite: boolean = false;
将您的模板更改为:
<div *ngIf="openCancelFavorite" [@openModal] class="onbusca-favorite-remove"> ... </div>
关于javascript - Angular 4 动画正在 init 组件上执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50530839/