beeimp
BeeImp
beeimp
전체 방문자
오늘
어제
  • 분류 전체보기 (110)
    • Program_Language (17)
      • Python (13)
      • Go (0)
      • JavaScript (4)
      • TypeScript (0)
      • Rust (0)
      • Solidity (0)
    • OS (8)
      • UNIX&LINUX (7)
      • Windows (0)
      • MacOS (1)
    • Front-End (19)
      • Svelte (19)
      • React (0)
    • Blockchain (6)
      • Bitcoin (0)
      • Ethereum (1)
      • Klaytn (0)
      • Project (5)
    • Data Structure&Algorithm (11)
      • Greedy (7)
      • Dynamic Programming (1)
      • Sort (0)
      • DFS & BFS (2)
      • Recursive (1)
    • Security (0)
      • SDP (0)
      • Authentication (0)
    • Network (3)
      • OpenWrt (0)
      • SDN&NFV (1)
    • Git (5)
    • IT_News (0)
    • 베타 학습단 (12)
      • SQL (12)
    • Project (1)
    • Issues (1)
    • Reviews (3)
    • I Learned (23)
      • TIL (23)
      • WIL (0)
    • Other (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • svelte
  • mysql
  • javascript
  • 블록체인
  • jenkins
  • PYTHON
  • 탐욕법
  • sql
  • solidity
  • 기초
  • typescript
  • blockchain
  • Git
  • Ethereum
  • Nest.js
  • react
  • greedy
  • ubuntu
  • github
  • Docker

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
beeimp

BeeImp

Front-End/Svelte

11_Svelte_Animations

2021. 8. 10. 16:43

Animations

이전 Transitions의 전환 지연 장에서 항목을 전환하면 새 위치로 부드럽게 이동합니다. 하지만 전환되지 않은 항목은 어색하게 움직입니다. 이를 위해 애니메이션 지침을 사용합니다.

먼저 "시작, 마지막, 반전, 재생'의 Flip 함수를 svelte/animate에서 가져옵니다.

import { flip } from "svelte/animate";

그 다움 <label> 요소에 추가합니다.

<label
    in:receive="{{key: todo.id}}"
    out:send="{{key: todo.id}}"
    animate:flip
>

이 경우에는 움직임이 약간 느리므로 duration 파라미터를 추가하여 조절할 수 있습니다.

<label
    in:receive="{{key: todo.id}}"
    out:send="{{key: todo.id}}"
    animate:flip="{{duration: 200}}"
>
  • duration은 또한 d => 밀리초 함수일 수 있습니다. 여기서 d는 요소가 이동해야하는 픽셀 수 입니다.

모든 전환 및 애니메이션은 JavaScript가 아닌 CSS로 적용되므로 기본 스레드를 차단(또는 가로막지)하지 않습니다.

'Front-End > Svelte' 카테고리의 다른 글

13_Svelte_Classes  (0) 2021.08.12
12_Svelte_Actions  (0) 2021.08.11
10_Svelte_Transitions  (0) 2021.08.09
09_Svelte_Motion  (0) 2021.08.05
08_Svelte_Stores  (0) 2021.08.04
    'Front-End/Svelte' 카테고리의 다른 글
    • 13_Svelte_Classes
    • 12_Svelte_Actions
    • 10_Svelte_Transitions
    • 09_Svelte_Motion

    티스토리툴바