转场 / 添加参数 a. 基础 b. 添加数据 c. 动态属性 d. 样式 e. 嵌套组件 f. 制作应用 a. 赋值 b. 声明 c. 状态 d. 更新数组和对象 a. 声明属性 b. 默认值 c. 展开属性 a. if 块 b. else 块 c. else-if 块 d. each 块 e. 为 each 块加键 f. await 块 a. DOM 事件 b. 内联处理程序 c. 事件修饰符 d. 组件事件 e. 事件转发 f. DOM 事件转发 a. 文本输入 b. 数字输入 c. 复选框输入 d. 组输入 e. 文本区域输入 f. 选择绑定 g. 选择多个 h. 内容可编辑绑定 i. each 块绑定 j. 媒体元素 k. 尺寸 l. this m. 组件绑定 n. 绑定到组件实例 a. onMount b. onDestroy c. beforeUpdate 和 afterUpdate d. tick a. 可写存储 b. 自动订阅 c. 可读存储 d. 衍生存储 e. 定制存储 f. 存储绑定 a. 补间 b. Spring a. 转场指令 b. 添加参数 c. 进进出出 d. 自定义 CSS 转场 e. 自定义 JS 转场 f. 转场事件 g. 全局转换 h. 延迟转场 i. 键块 a. 动画指令 a. 使用指令 b. 添加参数 a. 类指令 b. 速记类指令 c. 内联样式 d. 样式指令 a. 插槽 b. 插槽回退 c. 命名插槽 d. 检查插槽内容 e. 插槽属性 a. setContext 和 getContext a. <svelte:self> b. <svelte:component> c. <svelte:element> d. <svelte:window> e. <svelte:window> 绑定 f. <svelte:document> g. <svelte:body> h. <svelte:head> i. <svelte:options> j. <svelte:fragment> a. 共享代码 b. 导出 a. @debug 标签 b. HTML 标签 a. 恭喜!
转换函数可以接受参数。 将 fade 转场替换为 fly...
英 Transition functions can accept parameters. Replace the fade transition with fly...
< script >
import { fly } from 'svelte/transition' ;
let visible = true ;
</ script > ...并将其与一些选项一起应用到 <p>:
英 ...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.
秀给我看