css - CSS动画延迟不适用于角度和scss - 惊人的效果
问题描述
我正在尝试使用下面文章中的动画延迟来实现惊人的效果。
https://css-tricks.com/writing-animations-that-bring-your-site-to-life/
无法找出我在编写 scss 代码时所犯的错误。动画正在运行,但延迟未应用于元素。
首先,我认为 *ngFor 是问题,因为在数据到来之前元素不存在。因此评论了 ng for 并尝试使用静态框。仍然没有运气。
如果有人能够查明为什么没有应用动画延迟的根本原因,那将非常有帮助。
track.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>
轨道.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});
}
}
轨道.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;
}
}
解决方案
推荐阅读
- go - 将 rate.NewLimiter 速率限制器与通道一起使用
- ruby-on-rails - 我如何在 Rails 6 中使用 Httparty
- python - 如何在 Tkinter 窗口上使用 for 循环创建多个帧?
- javascript - 对 Promise 感到困惑,为什么打印“1 2 11 22”而不是“1 2 22 11”?
- python - 在 django 中上传多个没有表单的图像
- laravel - [Route: addapplication.edit] 缺少必需的参数
- php - 调用未定义的方法 MongoDB\Driver\Manager::executeUpdate()
- java - 如何创建复合注释?
- bash - 如何让 rm 不删除符号链接?
- javascript - Javascript数组被填充,我不明白如何