Svelte的Transition API提供了一种有力的方法,可以使组件进入或离开DOM,包括创建自定义过渡。默认利用CSS动画可确保最佳性能。基本语法很简单:<element transition:transitionfunction=""></element>
。您也可以in
指令或out
指令用于单向过渡。
Svelte的svelte/transition
软件包提供了七个预构建的过渡功能,可以在不编写自定义代码的情况下,易于自定义,以提供svelte/easing
,以供各种动画效果。尝试这些可能性。
需要巧妙的介绍吗?我们有一个全面的概述。
对于超出预构建选项的精细控制,Svelte允许定义自定义过渡功能,但要遵守特定的约定。如有记录,API结构是:
transition =(node:htmlelement,params:any)=> { 延迟?:数字, 持续时间?:数字, 放松?:( t:number)=>数字, CSS?:( T:number,u:number)=>字符串, tick?:( t:number,u:number)=> void }
过渡功能接收DOM节点,并带有动画参数返回对象。至关重要的是,它包括css
或tick
功能。
css
函数返回定义动画的CSS字符串(例如,变换或不透明度更改)。 tick
功能提供了完整的JavaScript控件,但是以性能成本绕过CSS动画时的性能成本。
css
和tick
都使用参数t
(入口时为0.00至1.00,出口时1.00至0.00)和u
(1- t
)。例如, transform: scale(${t})
在输入时从0到1平滑地比例。
让我们建立一个自定义过渡以说明。
我们将从一个简单的切换开始,以使用SVELTE #if
块来控制元素的DOM的影响(请记住,仅在DOM条目/出口上发生过渡)。
<script> let showing = true; </script> <label for="showing"> 展示 </label> <input type="checkbox" bind:checked="{showing}" id="showing"> {#if显示} <h1>你好自定义过渡!</h1> {/如果}
切换复选框显示出鲜明的外观/消失。现在,让我们添加一个自定义过渡功能:
<script> let showing = true; function whoosh(node) { console.log(node); } </script> <label for="showing"> 展示 </label> <input type="checkbox" bind:checked="{showing}" id="showing"> {#if显示} <h1 transition:whoosh="">你好自定义过渡!</h1> {/如果}
现在切换将元素记录到控制台,确认连接。我们将通过动画来增强它。让我们创建一个css
函数以进行缩放:
<script> function swoop() { return { duration: 1000, css: (t) => `transform: scale(${t})` } } let showing = true; </script> <label for="showing"> 展示 </label> <input type="checkbox" bind:checked="{showing}" id="showing"> {#if显示} <h1 transition:swoop="">你好自定义过渡!</h1> {/如果}
元素现在扩展,但突然。使用t
进行平滑动画:
<script> function swoop() { return { duration: 1000, css: (t) => `transform: scale(${t})` } } let showing = true; </script> <label for="showing"> 展示 </label> <input type="checkbox" bind:checked="{showing}" id="showing"> {#if显示} <h1 transition:swoop="">你好自定义过渡!</h1> {/如果}
对于“打动”效果,让我们添加translateX
,从侧面进行动画:
<script> function swoop() { return { duration: 1000, css: (t, u) => `transform: scale(${t}) translateX(${u * 100}%)` } } let showing = true; </script> <label for="showing"> 展示 </label> <input type="checkbox" bind:checked="{showing}" id="showing"> {#if显示} <h1 transition:swoop="">你好自定义过渡!</h1> {/如果}
在这里, u
( t
的倒数)控制着translateX
,以确保流畅的运动。
最后,让我们添加一个轻松的功能:
<script> import { elasticOut } from 'svelte/easing'; function swoop() { return { duration: 1000, easing: elasticOut, css: (t, u) => `transform: scale(${t}) translateX(${u * 100}%)` } } let showing = true; </script> <label for="showing"> 展示 </label> <input type="checkbox" bind:checked="{showing}" id="showing"> {#if显示} <h1 transition:swoop="">你好自定义过渡!</h1> {/如果}
您现在创建了一个自定义苗条的过渡!这只是一个起点。探索文档和教程以获取更高级的技术。了解t
和u
的相互作用是创建动态动画的关键。
以上是使您的第一个自定义苗条过渡的详细内容。更多信息请关注PHP中文网其他相关文章!