Svelte에서 전환과 같은 CSS를 수행하는 방법은 무엇입니까?

약식 속성은 CSS 속성으로 여러 CSS 속성의 값을 설정할 수 있습니다.

전환은 또한 요소의 두 상태 간의 전환을 정의하는 데 도움이 되는 약식 CSS 속성입니다. HTML 요소를 페이드/슬라이딩하는 것과 같습니다.

Svelte에서는 전환이 내장되어 있습니다. 이 기사에서는 Svelte 전환에서 이에 대해 배웁니다.
svelte/transition 모듈에는 blur , fade , fly , slide , scale , draw 및 crossfade 애니메이션이 포함되어 있습니다.

in 또는 out 지시문과 함께 사용됩니다. in 및 out 지시문은 HTML 요소가 DOM에서 추가되거나 제거될 때 작동합니다.

이전 기사에서 Svelte의 애니메이션에 대해 논의했습니다. 글을 안 보신 분들은 이 링크를 참고하세요.

새로운 경로 애니메이션/전환을 추가하는 것으로 시작하겠습니다. 여기가 처음인 경우 계속 진행하기 전에 이 링크를 방문해야 합니다. 경로를 생성하려면 새 파일 animations/transition.svelte를 생성해야 합니다.

transition.svelte에 다음 내용을 추가합니다.

<script>
    import { fade } from "svelte/transition"

    let options = { duration: 1000 }
    let show = true;

</script>
<h1>Transition in Svelte.</h1>

<label>Click here to view transitions</label>
<input type="checkbox" on:click={() => show = !show} />


{#if show}
    <h1 transition:fade={options}>Fading Away.</h1>
{/if}

페이드 전환을 가져오고 옵션 변수에서 지속 시간을 설정합니다. 그런 다음 확인란을 만들고 onclick과 바인딩하고 값을 true 또는 false로 설정합니다.

마찬가지로 흐림, 그리기, 크기 조정, 슬라이드 등과 같은 다른 전환을 추가할 수 있습니다.

<script>
    import { fade, blur, scale, slide } from "svelte/transition"

    let options = { duration: 1000 }
    let show = true;

</script>
<h1>Transition in Svelte.</h1>

<label>Click here to view transitions</label>
<input type="checkbox" on:click={() => show = !show} />


{#if show}
    <h1 transition:fade={options}>Fading Away.</h1>
    <h1 transition:blur={options}> Text to Blur </h1>
    <h1 transition:scale={options}> Text to Scale </h1>
    <h1 transition:slide={options}> Text to Slide </h1>
{/if}

다음 기사에서 뵙겠습니다.