x- 过渡

通过交换 CSS 类来添加动画过渡效果的Web 组件 。 如果您想使用 Tailwind CSS / Tailwind UI 来获取一些东西, 则有用 其他项目 比起Alpine.js,Vue或React(例如:lit-element / lit-html或Vanilla JavaScript).

自动处理嵌入式过渡,所以在孩子过渡完成之前,父母是不会隐藏的.

702字节 Brotli,877字节 Gzipepped, 2.28 KB Minified.

演示

使用量

将元素包到过渡中 <x-transition> 设置 open 属性或 .open 属性来控制可见度。 使用属性定义要应用的类别 :

• enter 当元素显示时应用( 切入过渡)
• enter-from 在输入过渡开始时应用
• enter-to 在输入过渡结束时应用
• leave 当元素被隐藏时应用( 离开过渡)
• leave-from 在休假过渡开始时适用
• leave-to 在休假过渡结束时适用

输入后, 元素 style.display 财产被清除. 休假后,要件 style.display 属性设定为 none。 。 。 .

如果出入口过渡对称,可以使用更紧凑的定义:

• with 将应用相同的值到 enter 财务报告和审定财务报表 leave。 。 。 .
• show 将应用相同的值到 enter-to 财务报告和审定财务报表 leave-from (即显示状态).
• hide 将应用相同的值到 enter-from 财务报告和审定财务报表 leave-to (即藏国也.

CDN/静态 HTML/香草 JS

在页面上添加脚本 :

<script src="https://unpkg.com/@captaincodeman/transition?module" type="module"></script>

环绕要转换的元素 <x-transition> 使用 Tailwind CSS 建议的类:

<!--
  Off-canvas menu overlay, show/hide based on off-canvas menu state.

  Entering: "transition-opacity ease-linear duration-300"
    From: "opacity-0"
    To: "opacity-100"
  Leaving: "transition-opacity ease-linear duration-300"
    From: "opacity-100"
    To: "opacity-0"
-->
<x-transition
    id="overlay"
    enter="transition-opacity ease-linear duration-300"
    enter-from="opacity-0"
    enter-to="opacity-100"
    leave="transition-opacity ease-linear duration-300"
    leave-from="opacity-100"
    leave-to="opacity-0">
  <div class="fixed inset-0">
    <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
  </div>
</x-transition>

或者,采用缩短的表格:

<x-transition 
    id="overlay"
    with="transition-opacity ease-linear duration-300"
    hide="opacity-0"
    show="opacity-100">
    &hellip;
</x-transition>

通过添加一个 open 属性 <x-transition> 元素或设置 .open 属性改为真实.

function showMenu() {
  overlay.open = true
}

编译脚本

使用 npm数字 :

npm install --save @captaincodeman/transition

导入到应用程序 :

import '@captaincodeman/transition'

使用 Tailwind CSS 的模板中包含基于所使用的应用诱导系统的分类设置显示(例如:

<!--
  Profile dropdown panel, show/hide based on dropdown state.

  Entering: "transition ease-out duration-200"
    From: "transform opacity-0 scale-95"
    To: "transform opacity-100 scale-100"
  Leaving: "transition ease-in duration-75"
    From: "transform opacity-100 scale-100"
    To: "transform opacity-0 scale-95"
-->
<x-transition
    enter="transition ease-out duration-200"
    enter-from="transform opacity-0 scale-95"
    enter-to="transform opacity-100 scale-100"
    leave="transition ease-in duration-75"
    leave-from="transform opacity-100 scale-100"
    leave-to="transform opacity-0 scale-95"
  >
  <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
    &hellip;
  </div>
</x-transition>

组合密钥

在一些同样使用过渡的母体中,有可能会封闭出一组单独的过渡. 为了避免他们全部反应/等待错误的东西,使用一个 key 属性来组合它们.

例如,所有与移动菜单相关的过渡可能都 key="mobile-menu" 这会让他们忽略其他过渡中的事件,反之亦然.

开始

使用 尾风示例代码