애니메이션 지속 시간을 알 수없는 숫자로 늘립니다.

애니메이션 지속 시간을 알 수없는 숫자만큼 증가시키고 싶습니다. 이것은 멀리 개까지 10 개 항목으로 작동애니메이션 지속 시간을 알 수없는 숫자로 늘립니다.

@for $i from 1 through 10 { 
    .rw-words span { 
     animation: rotateWord 27s linear infinite 0s; 
     &:nth-of-type(#{$i}) { 
      animation-delay:$i * 3s; 
     } 
    } 
}

,하지만 각 항목에 대한 애니메이션 지속 시간을 증가 할 수 있어야하지만, 거기에 얼마나 많은 항목 모르는이 내가 가진 것입니다. 게시물을 통해 반복하는 WordPress 사이트의 경우 10 또는 200 일 수 있습니다.

출처

2016-12-31 Vanessa Smith

최대 200 개의 텍스트 요소에 애니메이션을 적용하는 것이 맞습니까? – 1252748

SASS는 일반 CSS로 사전 컴파일되어 브라우저에서 나중에로드 및 구문 분석됩니다. 요소 수를 계산할 가능성이 없습니다. 왜냐하면 컴파일 된 시점에 요소 수를 알 수 없기 때문입니다.

출처

2016-12-31 20:38:48

Andes Andrade가 말했듯이 Sass는 순수한 CSS로 컴파일되었으므로 가질 수있는 요소의 정도에 대한 단서가 없습니다.

나에게이 작업을 수행하는 방법은 두 가지가 있습니다.

첫 번째는 의미 "최대 애니메이션 시나리오"를 만드는 것입니다 당신 루프 하드 코드 : @for $i from 0 to 500 (500 또는 200)

그러나 사용하지 않는 CSS의 많은 끝낼 수 있습니다 .

또는 자바 스크립트를 사용할 수 있습니다. 제게는 가장 좋은 옵션입니다. 가지고있는 아이템의 수를 계산하고 주문에 따라 애니메이션 지연을 변경합니다 (item.style.animationDelay = i * 3)

출처

2017-01-02 13:08:05 LukyVj

애니메이션 지속 시간을 알 수없는 숫자로 늘립니다.

답변

관련 문제