CSS动画延迟不适用于angular和scss-令人吃惊的效果

问题描述

我正试图通过以下文章中的动画延迟来达到惊人的效果。

https://css-tricks.com/writing-animations-that-bring-your-site-to-life/

难以发现我在编写scss代码期间犯的错误。动画有效，但延迟并未应用到元素上。

首先，我认为* ngFor是问题所在，因为直到数据出现，元素才存在。因此，评论了ng并尝试使用静态框。还是没有运气。

如果有人能够找出根本原因而不应用动画延迟，那将非常有帮助。

tracks.component.html

<div class="bg-dark vh-100">
  <div class="container-fluid">
    <div class="row pt-5">
      <div class="col-2">
        <img src="../../../assets/images/artists/{{artist.image}}" width="100%" height="100%" id="artist" class="image ml-5">
      </div>
    </div>
    <div class="tracks">
      <div>
        <div class="row">
          <div class="offset-1"></div>
          <!--<div class="col-2" *ngFor="let track of recentList";>
            <img src="../../../assets/images/tracks/recent/{{track.image}}" class="track">
          </div>-->
          <div class="col-2 mr-3">
            <div style="background-color: red;width: 300px; height: 300px;" class="track"></div>
          </div>
          <div class="col-2 mr-3">
            <div style="background-color: red;width: 300px; height: 300px;" class="track"></div>
          </div>
          <div class="col-2 mr-3">
            <div style="background-color: red;width: 300px; height: 300px;" class="track"></div>
          </div>
          <div class="col-2 mr-3">
            <div style="background-color: red;width: 300px; height: 300px;" class="track"></div>
          </div>
          <div class="col-2 mr-3">
            <div style="background-color: red;width: 300px; height: 300px;" class="track"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="track-container bg-white w-100">
      <div class="track-list">
        <div class="row">
          <div class="col-7">
            <div *ngFor="let track of recentList">

            </div>
          </div>
          <div class="col-5">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

tracks.component.scss

:root {
  --translate: '';
}

@keyframes move-image {
  from {
    transform: var(--translate);
  }
}

.image {
  animation: move-image 0.6s;
  border-radius: 5%;
}

.tracks {
  position: absolute;
  z-index: 1;
}

@keyframes move-track-container {
  to {
    opacity: 1;
    transform: none;
  }
}

.track-container{
  border-radius: 10px 10px 0 0;
  height: 670px;
  opacity: 0;
  transform: translateY(50%);
  animation: move-track-container 0.7s ease forwards;
}

@keyframes scale-down {
  to {
    opacity: 1;
    transform: none;
  }
}

.tracks{
  .track{
    border-radius: 5%;
    position: relative;
    box-shadow: 3px 0 0 5px #00000014;
    opacity: 1;
    transform: translateY(-30%);
    animation: scale-down 1s ease forwards;
  }
}



@for $i from 1 through 5 {
 track:nth-child(#{$i}) {
    animation-delay:(#{$i*0.1s});
  }
}

tracks.component.ts

import {Component,OnInit,ViewChild} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
// @ts-ignore
import tracksList from '../../../assets/json data/tracks.json';
import {trigger,query,stagger,animate,style,keyframes,transition} from '@angular/animations';

@Component({
  selector: 'app-tracks',templateUrl: './tracks.component.html',styleUrls: ['./tracks.component.scss']
})
export class TracksComponent implements OnInit {

  artistsList:any[];
  tracksList:any[];
  recentList:any[];
  artist:any;
  @ViewChild('artistImage') artistImage;

  constructor(private activatedRoute: ActivatedRoute) {
    this.tracksList = tracksList;
  }

  ngAfterViewInit(){
    console.log('x and y',this.artist.positionX +' and '+this.artist.positionY);
    const offsetLeft = 100;
    const offsetTop = 30;
    document.documentElement.style.setProperty(
      '--translate',`translate(${this.artist.positionX - offsetLeft}px,${this.artist.positionY - offsetTop}px) scale(0.792)`
    )
    console.log('this.recentList',this.recentList);
  }

  ngOnInit(): void {
    this.artist = this.activatedRoute.paramMap.pipe(map=>window.history.state.artist);
    this.artist = {
      category: "Pop singer",id: 2,image: "sukhe.jpg",name: "Sukh E",positionX: 335,positionY: 48
    }
    this.recentList = this.tracksList[this.artist.id].recent;
  }

}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）