Detalhes do pacote

@vtbag/utensil-drawer

vtbag27.1kISC1.2.11

Pull out just what you need to craft seamless transitions. The Utensil Drawer holds reusable functions to help you build websites with view transitions. It is a bit sparse right now, but like the one in your kitchen, it is bound to fill up over time.

view, transitions, view-transition, view-transitions

readme (leia-me)

⭐️Please star to support this work⭐️

🛠 The Utensil Drawer

Utensil Drawer: Pick the tools you need to craft the view transitions you want!

Build Status npm version minzip NPM Downloads

The @vtbag website can be found at https://vtbag.dev/

!!! News !!!

mayStartViewTransition() gets better and better. Not only overhauled, refactored, optimized and thoroughly tested...

...now also supports an option that rewrites view transition types as CSS classes to the :root element! In combination with the postcss-active-view-transition-type PostCSS plugin, you can use view transition types in browsers that only support Level 1 view transitions, yet. Looking at you, Firefox Nightly.

For details see https://vtbag.dev/tools/utensil-drawer/

What happened before?

Here are two exciting (still experimental) additions:

  • Access morph animation parameters directly in CSS! You can now access the key parameters of each morph animation in CSS rules! Make them available as CSS pseudo properties on your ::view-transition-group elements. Calculate animation values based on old and new positions, widths, and heights. Let the vectors script handle the JavaScript while you create pure CSS styles that go far beyond basic morphs!
  • Tiered of checking if startViewTransition is supported and whether it wants a function or also accepts the new object with view transitions types? The Drawer now includes the (still experimental) mayStatViewTransition function:
    • Works with the new signature in all supported browsers
    • Falls back gracefully if view transitions are not natively supported
    • 🥁🥁🥁 Optionally prevents killing the current transitions when a new one is started by automatically chaining view transitions 🥁🥁🥁

escapeViewTransitionName() is a function that escapes your view transition names so you are not stuck with just A-Za-Z0-9-_ characters. "😀"! It's a handy alternative to CSS.escape() for environments where that's not available.

Stable: declarative-names allows you to assign view transition names to a set of HTML elements, offering a more reliable and controllable alternative to view-transition-name: auto that works cross-browser and also for cross-document navigation.

For details see the CHANGELOG

What is it?

The Utensil Drawer holds reusable functions to help you build websites with view transitions. It is a bit sparse right now, but like the one in your kitchen, it is bound to fill up over time.