我正在尝试为我的应用程序创建基本的入口动画,并且希望它们在整个应用程序中是标准且可重用的。我希望元素从隐藏开始,然后在调用它们时进行动画处理。动画正在运行,但是在加载元素后会应用“隐藏”状态。我需要找到一种方法,使组件加载时以隐藏状态呈现元素。
我尝试使用:enter,但是我的许多元素都在使用flexbox和justify-content center。我还想使它们交错,这样,如果元素被* ngIf隐藏,则动画将被关闭,因为它们被渲染为唯一元素。
我还尝试过在组件的构造函数中设置状态,但这没有用。
edit:这仅适用于折叠中的元素,滚动到其下方的元素不会被看到并及时隐藏。
动画代码:
export const fadeInFromBottom =
trigger('fadeInFromBottom', [
state('hidden', style({
'opacity': '0',
'transform': 'translateY(25px)'
})),
state('shown', style({
'opacity': '1',
'transform': 'translateY(0)'
})),
transition('* => *', [
animate('400ms ease')
])
]);
component-设置状态的showAnimations对象:
@Component({
selector: 'app-product-overview',
templateUrl: './product-overview.component.html',
styleUrls: ['./product-overview.component.scss'],
animations: [ fadeInFromLeft, fadeInFromBottom, EAfadeInFromLeft, EAfadeInFromBottom ]
})
export class ProductOverviewComponent implements OnInit {
@ViewChild('pageIntro') pageIntro;
@ViewChild('howItWorks') howItWorks;
@ViewChild('benefits') benefits;
@ViewChild('customers') customers;
productOverviewDots: SideDot[];
subNavLinks;
subNavCTA = {
label: 'Request A Demo',
link: '#'
}
showAnimations = {
jumbotronCallout: 'hidden',
subCTA: {
howItWorks: 'hidden',
benefits: 'hidden',
customers: 'hidden'
},
howItWorks: {
header: 'hidden',
collect: 'hidden',
verify: 'hidden',
connect: 'hidden'
}
}
constructor(private scrollingService: ScrollingServiceService) {}
ngOnInit() {
this.productOverviewDots = [
{
section: this.pageIntro,
active: true,
entry: true
},
{
section: this.howItWorks,
active: false,
entry: false,
entryAnimations: () => {
setTimeout(() => this.showAnimations.howItWorks.header = 'shown', 600);
setTimeout(() => this.showAnimations.howItWorks.collect = 'shown', 1200);
setTimeout(() => this.showAnimations.howItWorks.verify = 'shown', 1400);
setTimeout(() => this.showAnimations.howItWorks.connect = 'shown', 1600);
}
},
{
section: this.benefits,
active: false,
entry: false,
entryAnimations() {
}
},
{
section: this.customers,
active: false,
entry: false,
entryAnimations() {
}
}
]
HTML的一部分:
<div class="container h-35">
<div class="row h-100">
<div class="col-lg-4 sub-cta" [@fadeInFromBottom]="showAnimations.subCTA.howItWorks">
<i class="icon-settings"></i>
<h4>How it Works</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
<div><button class="outlined" (click)="scrollingService.scrollToSection(howItWorks)"><div>Learn more</div></button></div>
</div>
<div class="col-lg-4 sub-cta" [@fadeInFromBottom]="showAnimations.subCTA.benefits">
<i class="icon-ribbon"></i>
<h4>Benefits</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
<div><button class="outlined" (click)="scrollingService.scrollToSection(benefits)"><div>Learn more</div></button></div>
</div>
<div class="col-lg-4 sub-cta" [@fadeInFromBottom]="showAnimations.subCTA.customers">
<i class="icon-clients-mobile"></i>
<h4>Customers</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
<div><button class="outlined" (click)="scrollingService.scrollToSection(customers)"><div>Learn more</div></button></div>
</div>
</div>
</div>