Блог

Я пытаюсь добиться ошеломляющего эффекта, используя задержку анимации из статьи ниже.

https://css-tricks.com/writin&-animations-that-brin&-your-site-to-life/

Возникли проблемы с обнаружением ошибки, которую я допускаю при написании кода scss. Анимация работает, но задержка не применяется к элементам.

Сначала я подумал, что проблема в * n&For, поскольку элемент отсутствует до поступления данных. Следовательно, прокомментировал n& для и попробовал со статическими блоками. По-прежнему безуспешно.

Если кто-нибудь сможет точно определить основную причину, по которой задержка анимации не применяется, это будет действительно полезно.

tracks.component.html

 <div class="b&-dark vh-100"&&t;
  <div class="container-fluid"&&t;
    <div class="row pt-5"&&t;
      <div class="col-2"&&t;
        <im& src="../../../assets/ima&es/artists/{{artist.ima&e}}" width="100%" hei&ht="100%" id="artist" class="ima&e ml-5"&&t;
      </div&&t;
    </div&&t;
    <div class="tracks"&&t;
      <div&&t;
        <div class="row"&&t;
          <div class="offset-1"&&t;</div&&t;
          <!--<div class="col-2" *n&For="let track of recentList";&&t;
            <im& src="../../../assets/ima&es/tracks/recent/{{track.ima&e}}" class="track"&&t;
          </div&&t;--&&t;
          <div class="col-2 mr-3"&&t;
            <div style="back&round-color: red;width: 300px; hei&ht: 300px;" class="track"&&t;</div&&t;
          </div&&t;
          <div class="col-2 mr-3"&&t;
            <div style="back&round-color: red;width: 300px; hei&ht: 300px;" class="track"&&t;</div&&t;
          </div&&t;
          <div class="col-2 mr-3"&&t;
            <div style="back&round-color: red;width: 300px; hei&ht: 300px;" class="track"&&t;</div&&t;
          </div&&t;
          <div class="col-2 mr-3"&&t;
            <div style="back&round-color: red;width: 300px; hei&ht: 300px;" class="track"&&t;</div&&t;
          </div&&t;
          <div class="col-2 mr-3"&&t;
            <div style="back&round-color: red;width: 300px; hei&ht: 300px;" class="track"&&t;</div&&t;
          </div&&t;
        </div&&t;
      </div&&t;
    </div&&t;
    <div class="track-container b&-white w-100"&&t;
      <div class="track-list"&&t;
        <div class="row"&&t;
          <div class="col-7"&&t;
            <div *n&For="let track of recentList"&&t;

            </div&&t;
          </div&&t;
          <div class="col-5"&&t;

          </div&&t;
        </div&&t;
      </div&&t;
    </div&&t;
  </div&&t;
</div&&t;
  

tracks.component.scss

 :root {
  --translate: '';
}

@keyframes move-ima&e {
  from {
    transform: var(--translate);
  }
}

.ima&e {
  animation: move-ima&e 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;
  hei&ht: 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 throu&h 5 {
 track:nth-child(#{$i}) {
    animation-delay:(#{$i*0.1s});
  }
}
  

tracks.component.ts

 import {Component, OnInit, ViewChild} from '@an&ular/core';
import {ActivatedRoute} from '@an&ular/router';
// @ts-i&nore
import tracksList from '../../../assets/json data/tracks.json';
import {tri&&er, query, sta&&er, animate, style, keyframes, transition} from '@an&ular/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('artistIma&e') artistIma&e;

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

  n&AfterViewInit(){
    console.lo&('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.lo&('this.recentList',this.recentList);
  }

  n&OnInit(): void {
    this.artist = this.activatedRoute.paramMap.pipe(map=&&t;window.history.state.artist);
    this.artist = {
      cate&ory: "Pop sin&er",
      id: 2,
      ima&e: "sukhe.jp&",
      name: "Sukh E",
      positionX: 335,
      positionY: 48
    }
    this.recentList = this.tracksList[this.artist.id].recent;
  }

}