首页 文章

Angular - 列表元素的错开动画

提问于
浏览 次
2

我有一个像这样定义的转换：

transition('show-content => hide-content', [
    query('.project-view-item', [
        style({
            opacity: 1,
            transform: 'translateX(0px)'
        }),
        stagger('0.3s', [
            animate(
                '0.2s',
                keyframes([
                    style({
                        opacity: 0,
                        transform: 'translateX(-40px)',
                        offset: 1
                    })
                ])
            )
        ])
    ])
])

一切都按预期工作 . 物品向左和淡出 . 问题是，在所有项目都隐藏后，样式会重置，并且它们会立即再次显示 . 这就像我需要有一个名为 animation-fill-mode: forwards 的css3属性 .

我怎么能在角度上做到这一点？如何保留动画的最后状态？

Plnkr https://plnkr.co/edit/te0tJ76GkhkaRxF2LI2B

css angular typescript angular-animations

2 回答

  • 0

    动画开始和动画完成将有助于：

    HTML

    <div class="project-view" (@content.start)="start($event)" 
    (@content.done)="done($event)" [@content]="isShowContent ? 'show-content': 'hide-content'">
        <div class="myClass">
            <div class="project-view-item">Hello</div>
            <div class="project-view-item">Hi</div>
            <div class="project-view-item">Hello</div>
            <div class="project-view-item">Hi</div>
            <div class="project-view-item">Hello</div>
            <div class="project-view-item">Hi</div>
            <div class="project-view-item">Hello</div>
            <div class="project-view-item">Hi</div>
        </div>
    </div>

    Typescript:

    hideContent(callback?) {
    console.log("HIDE CONTENT CALLED");
    this.isShowContent = false;
    this.callback = callback;
  }

  showContent(callback?) {
    console.log("SHOW CONTENT CALLED");
    this.isShowContent = true;
    this.callback = callback;
  }

  done(event) {
    if (this.isShowContent) {
      document.querySelector('.myClass').setAttribute('style',
        "opacity:1;transform: 'translateX(0)')");
    }
    else {
      document.querySelector('.myClass').setAttribute('style',
        "opacity:0;transform: 'translateX(-40px)')");
    }

  }

  start(event) {
    document.querySelector('.myClass').setAttribute('style',
      "opacity:1; transform: 'translateX(-40px)')");
  }

    Demo

    回复于
  • 1

    还可以在动画中添加 state 声明，因此您不需要使用动画逻辑污染模板和ts文件：

    transition('show-content => hide-content', [
    ....
]
state('hide-content', style({opacity: 0})),
    回复于

相关问题