mithril-transition-group

WebJar for mithril-transition-group

License	MIT
GroupId	org.webjars.npm
ArtifactId	mithril-transition-group
Last Version	0.1.7
Release Date	Nov 1, 2019
Type	jar
Description	mithril-transition-group WebJar for mithril-transition-group
Project URL	http://webjars.org
Source Code Management	https://github.com/vrimar/mithril-transition-group

Download mithril-transition-group

Filename	Size
mithril-transition-group-0.1.7.pom
mithril-transition-group-0.1.7.jar	10 KB
mithril-transition-group-0.1.7-sources.jar	22 bytes
mithril-transition-group-0.1.7-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/mithril-transition-group/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>mithril-transition-group</artifactId>
    <version>0.1.7</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/mithril-transition-group/
implementation 'org.webjars.npm:mithril-transition-group:0.1.7'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/mithril-transition-group/
implementation ("org.webjars.npm:mithril-transition-group:0.1.7")

Apache Buildr

'org.webjars.npm:mithril-transition-group:jar:0.1.7'

Apache Ivy

<dependency org="org.webjars.npm" name="mithril-transition-group" rev="0.1.7">
  <artifact name="mithril-transition-group" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='mithril-transition-group', version='0.1.7')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "mithril-transition-group" % "0.1.7"

Leiningen

[org.webjars.npm/mithril-transition-group "0.1.7"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.npm : element-class	jar	[0.2.2,0.3)

Project Modules

There are no modules declared in this project.

mithril-transition-group

A set of Mithril components for creating state/class based transitions. Inspired by react-transition-group.

Installation

npm install --save mithril-transition-group

Transition

Transition is a component that allows you to transition children based on current animation state.

There are 4 main states a Transition can be in:

1. ENTERING
2. ENTERED
3. EXITING
4. EXITED

By default, the Transition component does not alter it's children; it only tracks "enter" and "exit" transitions.

Transition Example

Transition Example

Transition API

interface ITransitionAttrs {
  /** Displays the content; triggers onEnter/onExit callbacks */
  isVisible?: boolean;

  /** Content to be transitioned */
  content?: m.Children | ((state: TransitionState) => m.Children);

  /** Invoked on initial component enter */
  onEnter?: (node: HTMLElement) => void;

  /** Invoked when component is entering */
  onEntering?: (node: HTMLElement) => void;

  /** Invoked when component has entered */
  onEntered?: (node: HTMLElement) => void;

  /** Invoked on initial component exit */
  onExit?: (node: HTMLElement) => void;

  /** Invoked when component is exiting */
  onExiting?: (node: HTMLElement) => void;

  /** Invoked on when component has exited */
  onExited?: (node: HTMLElement) => void;

  /** Timeouts for enter/exit transition */
  timeout: number | {
    enter: number;
    exit: number;
  };
}

CSS Transition

A component that uses CSS classes for transitions. It is inspired by ng-animate.

CSSTransition applies a pair of classes (specified by the transitionClass property) to content during the enter and exit transition states. Assuming transitionClass="fade", the lifecycle process is as follows.

1. onEnter: .fade-enter class is added to content
2. onEntering: .fade-enter-active class is added to content
3. onEntered: .fade-enter and .fade-enter-active are removed from content
4. onExit: .fade-exit class is added to content
5. onExiting: .fade-exit-active class is added to content
6. onExited: .fade-exit and .fade-exit-active are removed from content

CSSTransition Example

CSSTransition Dialog Example

CSSTransition API

interface ICSSTransitionAttrs {
  /** Displays the content; triggers onEnter/onExit callbacks */
  isVisible?: boolean;

  /** Content to be transitioned */
  content?: m.Children | ((state: TransitionState) => m.Children);

  /** Invoked on initial component enter */
  onEnter?: (node: HTMLElement) => void;

  /** Invoked when component is entering */
  onEntering?: (node: HTMLElement) => void;

  /** Invoked when component has entered */
  onEntered?: (node: HTMLElement) => void;

  /** Invoked on initial component exit */
  onExit?: (node: HTMLElement) => void;

  /** Invoked when component is exiting */
  onExiting?: (node: HTMLElement) => void;

  /** Invoked on when component has exited */
  onExited?: (node: HTMLElement) => void;

  /** Timeouts for enter/exit transition */
  timeout: number | {
    enter: number;
    exit: number;
  };

  /** CSS class base to use for enter/exit transitions */
  transitionClass: string;
}

Versions

Version
0.1.7 Nov 1, 2019