将固定在底部的位置固定为0的角度动画

Question

我正在尝试使用角度动画库执行输入幻灯片放映动画。

使用position: fixed, bottom: 0将子div的一个放在页面底部

问题是动画开始时子div的位置从顶部开始，动画完成后向下移动到页面底部。

下面是示例：Stackblitz。

正如您观察到的那样，子Box，Parent Box都在同一位置结束了动画，并且在该子Box向下移动之后。

如何解决此问题，以便动画开始时子div位于页面底部。由于此动画看起来不流畅。

Answer 1

我在您的代码中玩了一下，得到了：

//our root app component
import { Component, NgModule, EventEmitter } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material';

import { style, animate, animation, animateChild, useAnimation, group, sequence, transition, state, trigger, query as q, stagger } from '@angular/animations';
const query = (s,a,o={optional:true})=>q(s,a,o);

@Component({
  selector: 'my-app',
  template: `
    <div class="appContainer" [@routeChange]>
      <div class="box">Parent box</div>
      <div class="box child" [@childElem]>Child box</div>
    </div>
  `,
  animations: [
    trigger('routeChange', [
      transition(':enter', [
        query('@*', [animateChild()]),
        query('.box', [
          style({ transform: 'translateX(-100%)', opacity: 0 }),
          animate('3400ms cubic-bezier(.75,-0.48,.26,1.52)', style({ transform: 'translateX(0)', opacity: 1 }))
        ])
      ]),
    ])
  ],
  styles: [`

    .appContainer {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

   .child {
     color: green;
     bottom: 0;
     left: center;
     position: fixed;
   }

    .box {
      width: 100px;
      height: 50px;
      background-color: #f0397b;
      margin: 5px;
    }


  `]
})
export class App {

}

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, MatButtonModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule { }

Here是您在Stackblitz上的代码的分支。希望对您有所帮助：）