位置固定到底部的角度动画设置为 0答案

【问题标题】：Angular animation with position fixed to bottom set to 0位置固定到底部的角度动画设置为 0
【发布时间】：2020-03-24 09:13:52
【问题描述】：

我正在尝试使用角度动画库执行输入滑入动画。

其中一个子 div 使用 position: fixed, bottom: 0 放置在页面底部

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

以下是示例：Stackblitz。

如您所见，子 Box、Parent Box 都在同一位置结束动画，然后该子框向下移动。

如何解决这个问题，让动画开始时子 div 位于页面底部。因为这个动画看起来不太流畅。

【问题讨论】：

标签： angular css-animations angular-animations

【解决方案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 上的代码的分支。希望对你有帮助:)

【讨论】：