목차:

Fade

Blur

Fly

Slide

Scale

Draw

Svelte에는 사용하기 매우 쉬운 자체 전환 기능이 내장되어 있습니다. 전환은 매우 사용자 정의가 가능하며 공통적으로 delay , durarion 및 easing 의 몇 가지 매개변수가 있습니다. 모두 out 없이 사용할 수 있는 기본값이 있습니다. 전환은 웹사이트/앱에 파짜를 제공할 수 있는 좋은 방법입니다. 무엇이 효과가 있는지 확인하기 위해 대부분의 작업을 수행하는 일반적인 방법은 다음과 같을 수 있습니다.

<script>
import { fade, blur, fly, slide, scale} from 'svelte/transition';

let i = 0 

const handleClick = () => { i++ };

</script>

<div>
  <button on:click='{handleClick}'> ADD </button>
  {#key i }
    <div transition:TRANSITION_NAME="{{duration: 300}}">
      { i }
    </div>
  {/key}
</div>

이를 테스트하려면 가져온 전환 중 하나로 변경TRANSITION_NAME합니다. 이렇게 하면 숫자가 렌더링되고 i 에 추가되며 변경 사항은 전환을 표시합니다. fixed를 유지하기 위해 일부 CSS 규칙을 추가하면 비율 및 흐림과 같은 일부 전환이 더 보기 좋아집니다. 이 예제는 요소의 다시 렌더링을 트리거하는 간단한 속성 변경이지만 구성 요소에서도 이 작업을 수행할 수 있습니다.

바래다

Fade는 delay , duration 및 easing 매개변수를 사용할 수 있습니다. 지연은 전환이 시작되기 전의 시간(밀리초)이며 기본값은 0으로 설정됩니다. 기간은 전환이 지속되는 시간(밀리초)입니다. 부드러운 여유 기능에서 여유가 더 많은 정보를 볼 수 있습니다here. 페이드의 예는 다음과 같습니다.



Tutorial

Docs

흐림

Blur는 렌더링되는 요소를 흐리게 처리합니다. 이는 흐림이 페이드와 마찬가지로 delay , durarion 및 easing 를 취하는 추가 매개변수이지만 다른 2개는 opacity 및 amount 입니다. 불투명도는 안팎으로 움직이는 의지이고 양은 흐림의 크기입니다.



Docs

파리

플라이 전환은 x 및 y 위치에서 마지막 요소 위의 프레임으로 한 요소를 이동합니다. 매개변수가 전달된 in:fly 및 out:fly를 사용할 수 있습니다. X 및 Y는 축을 사용하여 새로 렌더링된 요소를 위치에서 이동합니다. 다음과 같이 만들 수 있습니다.



Tutorial

Docs

미끄러지 다

슬라이드는 프레임 안팎으로 요소를 렌더링합니다. Blur와 마찬가지로 delay , duration 및 easing 함수를 사용합니다. 이것은 구현 및 단순한 모양의 애니메이션으로의 매우 간단한 전환입니다. 예를 들면 다음과 같습니다.



Docs

규모

스케일은 z 인덱스에서 요소를 안팎으로 렌더링하고 커집니다. 그것은 opacity , x , y 함수, delay 및 duration 를 취합니다. 시작은 요소 초기 크기를 조정합니다. 예를 들면 다음과 같습니다.



Docs

그리다

그리기 애니메이션은 조금 더 복잡하지만 구현하기에 매우 재미있을 수 있습니다. 이것은 경로에서 SVG를 그리는 데 사용됩니다. 아이콘이나 페이지의 이미지와 같이 화려하고 재미있는 느낌을 주고 싶을 때 사용할 수 있습니다. 받는 매개변수는 easing , delay , duration 및 easing 함수입니다. Svg에는 단순히 모양이나 아이콘에 그려진 것이 아니라 경로가 필요합니다. 전환은 SVG의 경로 매개변수에서 호출됩니다. 간단한 구현은 다음과 같습니다.



Docs

이것은 날씬한 전환에 대한 간단한 소개일 뿐입니다. 촉구하려면 svelte가 제공하는 자습서를 자세히 살펴보십시오. 전환을 사용하는 방법을 보여줘야 하는 REPL은 구현 전에 전환을 테스트하는 쉬운 방법입니다. 애니메이션을 가지고 놀면서 애니메이션에 대한 느낌을 얻고 사용 방법을 이해하고 실제 모양에 대한 느낌을 얻는 것이 중요합니다.