Question

我正在尝试为我的应用程序创建基本的入口动画，并且希望它们在整个应用程序中是标准且可重用的。我希望元素从隐藏开始，然后在调用它们时进行动画处理。动画正在运行，但是在加载元素后会应用“隐藏”状态。我需要找到一种方法，使组件加载时以隐藏状态呈现元素。

我尝试使用：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>

加载组件后呈现Angular 6动画状态

0 个答案: