mithril-transition-injector v2.1.0

Mithril Transition Injector

Usage

import in TypeScript

import T, {inject} from "mithril-transition-injector";

import in JavaScript

const transitionInjector = require("mithril-transition-injector");
const T = transitionInjector.default;
const inject = transitionInjector.inject;

example with wrapper tag

import * as m from "mithril";
import T from "mithril-transition-injector";
import "./style.scss";

export default class App implements m.ClassComponent<any> {
  public view(v: m.CVnode<any>) {
    return <T delay={250} depth={3}>
      <div className="app" transition="slide-down">
        <div className="title" transition="slide-down">My Todo's</div>
        <button className="clear" transition="slide-down">X</button>

        <div className="todos">
          {this.todos.map((todo: ITodo, index: number) =>
            <Todo transition="slide-right" transitiongroup="todo" transitiondelay={100} key={todo.id} done={todo.done}>
              {todo.title}
            </Todo>,
          )}
        </div>

        <input transition="slide-down" />
      </div>
    </T>;
  }
}

example with injection

import * as m from "mithril";
import {inject} from "mithril-transition-injector";
import "./style.scss";

class App implements m.ClassComponent<any> {
  public view(v: m.CVnode<any>) {
    return <div className="app" transition="slide-down">
      <div className="title" transition="slide-down">My Todo's</div>
      <button className="clear" transition="slide-down">X</button>

      <div className="todos">
        {this.todos.map((todo: ITodo, index: number) =>
          <Todo transition="slide-right" transitiongroup="todo" transitiondelay={100} key={todo.id} done={todo.done}>
            {todo.title}
          </Todo>,
        )}
      </div>

      <input transition="slide-down" />
    </div>;
  }
}

export default inject(App, {depth: 3, delay: 250});

example css transition classes

$duration: .5;
$transitionBounce: cubic-bezier(.63, .44, .37, 1.72);

.slide-right {
  transition: transform #{$duration}s $transitionBounce, opacity #{$duration}s;
  &.before {
    transform: translateX(-100px);
    opacity: 0;
  }
  &.after {
    transform: translateX(100px);
    opacity: 0;
  }
}

.slide-down {
  transition: transform #{$duration}s $transitionBounce, opacity #{$duration}s;
  &.before {
    transform: translateY(-100px);
    opacity: 0;
  }
  &.after {
    transform: translateY(100px);
    opacity: 0;
  }
}

options

<T 
  group?: string; // defalt "main"
  delay?: number; // defalt 0
  pause?: number; // defalt 0
  depth?: number; // defalt 1
>
...
</T>

<T>
  <div // or any other tag 
    transition: string;
    transitiongroup?: string;
    transitiondelay?: number;
    transitionpause?: number;
  >
  ...
  </div>
</T>