过渡 /
The transition directive
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!
过渡
We can make more appealing user interfaces by gracefully transitioning elements into and out of the DOM. Svelte makes this very easy with the transition
directive.
First, import the fade
function from svelte/transition
...
< script>
import { fade } from 'svelte/transition' ;
let visible = true ;
</ script>
...then add it to the <p>
element:
< p transition: fade> Fades in and out</ p>
Show me