webcomponent-transition-group

v1.0.1

Published

6 months ago

A web component to use css transitions for smoot entry, exit and layout changes

Downloads

0High
0Medium
0Low

zaceno

transitions web-components

A Transition-Group Web Component

NEW: more in depth docs and interactive examples here: https://zaceno.github.io/webcomponent-transition-group

Using css transitions to manage elegant and smooth appearances and dissapearances of elements on ones pages can be difficult. In particular when using virtual-dom based frameworks, as they expect full control of the DOM, so one needs to keep track of the transition state alongside the business logic of one's application.

But this custom element alleviates that.

Install

Either install locally

>npm install webcomponent-transition-group

and import in your app:

import "webcomponent-transition-group"

or import directly in script files that need it:

import "https://unpkg.com/webcomponent-transition-group"

or add it to the head of your html file:

<html>
  <head>
    <script
      type="module"
      src="https://unpkg.com/webcomponent-transition-group"
    ></script>
    ...</head
  ></html
>

Usage

However you imported it, once imported, the <transition-group> html element is available to use.

By default it does nothing

<transition-group>
  <div class="popup">
    <p>Hello!</p>
  </div>
  <transition-group></transition-group
></transition-group>

Entry

... but if you set the entry attribute to a class-name:

<transition-group entry="popup-entry">
  <div class="popup">
    <p>Hello!</p>
  </div>
  <transition-group></transition-group
></transition-group>

Then every child of the transition-group, when it is first added, will first be given the class "popup-entry-pre" (the given class-name, with "-pre" as a suffix). For this class you will define how the element is hidden:

.popup-entry-pre {
  opacity: 0;
  transform: translateY(-100%);
}

The transition-group will on the next frame cause the "popup-entry-pre" class to be replaced with just "popup-entry", where you define how the transition should behave:

.popup-entry {
  transition: 0.3s ease-in;
}

One the transition completes, the "popup-entry" class will be removed from the child element.

Exit

If you set the exit attribute to a class name (e.g "popup-exit"), then once a child is removed from the transition-group element, it will remain visible (actually moved in to the shadow-dom of the transition-group) but have the "popup-exit" class name added so you can define the transition for how it exits:

.popup-exit {
  transition: all 0.2s;
  opacity: 0;
  transform: scale(2, 2);
}

Once the transition completes, the element will be really removed.

Layout

When there are multiple children, their order typically affects how they are laid out, and if you change the order, you may want them to slide smoothly to their new position. The transition-group element allows you to achieve this by adding a class name to the slide attribute:

<transition-group slide="gallery-slide">
  <img class="thumbnail" ... />
  <img class="thumbnail" ... />
  <img class="thumbnail" ...
/></transition-group>

The classname set allows you to define the timing of the sliding in css:

.gallery-slide {
  transition: 0.4s linear;
}

Important tips

When using a virtual-dom based framework, make sure you are really adding, removing and reordering the same elements by using keys (or your framework's equivalent) on every child of transition-group.

If you notice strange behavior, or some elements are not being removed/positioned properly, it could be because you have made a mistake in your css and you are not actually causing transitions to happen.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme