过渡 /
Adding parameters
a. 基础知识 b. 添加数据 c. 动态属性 d. CSS 样式 e. 嵌套组件 f. HTML 标签 g. 创建一个应用程序 a. 赋值 b. 声明 c. 语句 d. 更新数组和对象 a. Declaring props b. Default values c. 属性传递 a. If blocks b. Else blocks c. Else-if 块 d. Each 块 e. 为 each 块添加 key 值 f. Await 块 a. DOM events b. Inline handlers c. 事件修饰符 d. 组件事件 e. 事件转发 f. DOM 事件转发 a. Text inputs b. Numeric inputs c. 复选框 d. 输入框组绑定 e. 文本域绑定 f. 选择框绑定 g. 选择框的multiple属性 h. Contenteditable的绑定 i. Each 块绑定 j. 媒体标签的绑定 k. 尺寸的绑定 l. This m. 组件绑定 a. onMount b. onDestroy c. beforeUpdate 和 afterUpdate d. tick a. Writable stores b. Auto-subscriptions c. 只读 stores d. stores派生 e. 自定义 stores f. 绑定Store a. Tweened b. Spring a. The transition directive b. Adding parameters c. 出入 d. 自定义 CSS 过渡 e. 自定义 JS 过渡 f. 过渡事件 g. 局部过渡 h. 延时过渡 a. The animate directive a. The use directive b. Adding parameters a. The class directive b. Shorthand class directive a. Slots b. Slot fallbacks c. Named slots d. Checking for slot content e. Slot 属性 a. setContext and getContext a. <svelte:self> b. <svelte:component> c. <svelte:window> d. <svelte:window>绑定 e. <svelte:body> f. <svelte:head> g. <svelte:options> a. Sharing code b. Exports a. The @debug tag a. Congratulations!
Transition functions can accept parameters. Replace the fade
transition with fly
...
< script>
import { fly } from 'svelte/transition' ;
let visible = true ;
</ script>
...and apply it to the <p>
along with some options:
< p transition: fly= " {{ y: 200, duration: 2000 }}" >
Flies in and out
</ p>
Note that the transition is reversible — if you toggle the checkbox while the transition is ongoing, it transitions from the current point, rather than the beginning or the end.
Show me