Question

我正在尝试让aurelia-animator-css库与我的应用程序一起工作而没有任何运气。我有一个像这样结构的模板：

<div id="droplets" class="col s4 au-stagger" style="min-height:655px;">

    <div id="droplet-1" class="droplet-1 droplet-left au-animate" ref="droplets[1]">
      <div style="height:25px;"></div>
      <p>Droplet 1</p>
      <i class="fa fa-chevron-right"></i>
    </div>
    <div id="droplet-2" class="droplet-2 droplet-right au-animate" ref="droplets[2]">
      <div style="height:10px;"></div>
      <p>Droplet 2</p>
      <i class="fa fa-chevron-right"></i>
    </div>
    <div id="droplet-3" class="droplet-3 droplet-left au-animate"  ref="droplets[1]">
      <div style="height:20px;"></div>
      <p>Droplet 3</p>
      <i class="fa fa-chevron-right"></i>
    </div>
</div>

我正试图让这些水滴一次一个地消失，就像这篇博文中所示：http://blog.aurelia.io/2015/07/17/animating-apps-with-aurelia-part-1/，但我没有运气。

到目前为止，这是我正在使用的SASS：

@-webkit-keyframes dropletFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes dropletFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#droplets {
  .au-stagger {
    -webkit-animation-delay: 50ms;
    animation-delay: 50ms;
  }
  #droplet-1,#droplet-2,#droplet-3 {
    &.au-enter {
      opacity: 0!important;
    }

    &.au-enter-active {
      -webkit-animation: dropletFadeIn 2s;
      animation: dropletFadeIn 2s;
    }

    &.au-leave-active {
      -webkit-animation: fadeOut 2s;
      animation: fadeOut 2s;
    }
  }
}

到目前为止它什么也没做。我也试过像这样直接使用动画师：

attached() {
    setTimeout(() => {this.showDroplet(2)}, 750);
    setTimeout(() => {this.showDroplet(3)}, 1500);
    setTimeout(() => {this.showDroplet(1)}, 2250);
  }

  showDroplet(num: number) {
    this.log.debug('Showing droplet ' + num + ' element = ' + this.droplets[num]);
    // this.droplets[num] = true;
    this.cssAnimator.addClass(this.droplets[num],"dropletFadeIn").then(successful => this.log.debug('Did it work for ' + num + '? ' + successful));
  }

也没有运气......它什么也没做，Promise返回false。我还让这些小滴使用if.bind将它们放到DOM中，然后呈现页面以触发动画师，但这不起作用。

有人有什么想法吗？

Aurelia-animator-css淡出效果

0 个答案: