首页 > web前端 > css教程 > 使您的第一个自定义苗条过渡

使您的第一个自定义苗条过渡

尊渡假赌尊渡假赌尊渡假赌
发布: 2025-03-15 11:08:09
原创
1011 人浏览过

使您的第一个自定义苗条过渡

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节点,并带有动画参数返回对象。至关重要的是,它包括csstick功能。

css函数返回定义动画的CSS字符串(例如,变换或不透明度更改)。 tick功能提供了完整的JavaScript控件,但是以性能成本绕过CSS动画时的性能成本。

csstick都使用参数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>
{/如果}
登录后复制

在这里, ut的倒数)控制着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>
{/如果}
登录后复制

结论

您现在创建了一个自定义苗条的过渡!这只是一个起点。探索文档和教程以获取更高级的技术。了解tu的相互作用是创建动态动画的关键。

以上是使您的第一个自定义苗条过渡的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板