3

我有一个这样定义的过渡：

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
                    })
                ])
            )
        ])
    ])
])

一切都按预期工作。项目向左淡出。问题是，在所有项目都被隐藏后，样式会被重置，并且它们会立即再次变得可见。就像我需要将那个 css3 属性称为animation-fill-mode: forwards.

我怎样才能做到这一点？如何保留动画的最后状态？

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

4

2 回答 2

2

动画开始和动画完成将在这里有所帮助：

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>

打字稿：

  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)')");
  }

演示

于 2017-09-01T13:11:09.167 回答
0

还可以向state动画添加声明，这样您就不需要使用动画逻辑污染模板和 ts 文件：

transition('show-content => hide-content', [
    ....
]
state('hide-content', style({opacity: 0})),
于 2018-06-12T05:48:09.127 回答