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

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中文网其他相关文章！