<commit_before># Inferno Animation API
This package provides CSS-animations when components are added and removed.

Requires Inferno >=7.5.0

To migrate from earlier versions of inferno-animation, read the last section on this page.

```
npm install inferno-animation --save
```

## Using inferno-animation
Since **Inferno 7.5.0** there is support for animation lifecycle events:

Class components:
- componentDidAppear(dom)
- componentWillDisappear(dom, callback)

Functional components:
- onComponentDidAppear(dom, props)
- onComponentWillDisappear(dom, props, callback)

When you implement these, inferno will call them and pass the DOM-node of the component instance right after the component has been added or right before the component will be removed. Inferno will delay the removal of the actual DOM-node until you call the callback method allowing you to complete a removal animation.

Inferno-animation exposes a base class to provide you with an easy way of animating your class components and helper methods to animate functional components.

### Creating an animated component

#### Class Component
With inferno-animation you get a new base class called `AnimatedComponent`. It has the two animation lifecycle events implemented for you.

By extending this base class instead of `Component` your component will animate on add and remove using CSS-animations that you can easily customize.

```JSX
import { Component } from 'inferno';
import { AnimatedComponent } from 'inferno-animation';

class Animated extends AnimatedComponent {
  render({className, children}) {
    return <div className={className}>{children}</div>
  }
}

class MyComponent extends Component {
  render() {
    return <Animated animation="HeightAndFade">[...]</Animated>
  }
}
```

#### Functional Component
Two helper methods are exposed by inferno-animation. You can use them to activate animations on functional components.

```JSX
import { Component } from 'inferno';
import { componentDidAppear, componentWillDisappear } from 'inferno-animation';

function Animated ({className, children}) {
  return <div className={this.props.className}>{children}</div>
}

class MyComponent extends Component {
  render() {
    return <Animated
      onComponentDidAppear={componentDidAppear}
      onComponentWillDisappear={componentWillDisappear}
      animation="HeightAndFade">[...]</Animated>
  }
}
```

In both cases, if you don't specify the property `animation="[AnimationPrefix]"` it will default to `inferno-animation`.


### Customizing CSS animations
When you specify the animation property `<MyComponent animation="HeightAndFade">...</MyComponent>` the component will animate according to the following CSS-classes when appearing in the DOM:

- .HeightAndFade-enter {}
- .HeightAndFade-enter-active { /* the actual transitions */ }
- .HeightAndFade-enter-end {}

And the following when disappearing:

- .HeightAndFade-leave {}
- .HeightAndFade-leave-active { /* the actual transitions */ }
- .HeightAndFade-leave-end {}

There are some important rules for smooth animations. Always style the animated component with:

- box-sizing: border-box;
- margin: 0;

Border-box will allow width and height to be calculated properly. This makes it possible to animate these properties on dynamically sized components.

Setting margin to zero will prevent overlapping margins, which could cause a jump when elements are removed. The wierd behaviour with overlapping margins has been implemented in browsers since the dawn of CSS and made sense for text rendering, but is a nuissance anywhere else.

Here is an example of CSS for `<MyComponent className="MyComponent" animation="HeightAndFade">` using SCSS. In the example, the disappear (leave) animation will be a slightly quicker reverse version of the appear (enter) animation:

```scss
.MyComponent {
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0.5rem;
  border: 1px solid black;
  background-color: white;
  overflow-y: hidden; // hide any overflow on animation axis
}

.HeightAndFade {
  &-enter,
  &-leave-end { // Start and end with element collapsed and fully transparent
    height: 0;
    opacity: 0;
  }

  &-enter-active {
    transition: all 0.5s ease-in;
  }

  &-leave-active {
    transition: all 0.2s ease-out;
  }

  &-enter-end,
  &-leave { // Animate to and from full height with full opacity
    height: auto;
    opacity: 1;
  }
}
```

### The animation lifecycle of an animation handler
This is an explanation of how the helper methods in inferno-animation work. The lifecycle of an animation consists of five phases:

1. Measure width and height
<commit_msg>Update website docs to include move animations (#153)<commit_after># Inferno Animation API
This package provides CSS-animations when components are added and removed.

Requires Inferno >=7.5.0

To migrate from earlier versions of inferno-animation, read the last section on this page.

```
npm install inferno-animation --save
```

## Using inferno-animation
Since **Inferno 7.5.0** there is support for animation lifecycle events:

Class components:
- componentDidAppear(dom)
- componentWillDisappear(dom, callback)
- componentWillMove(parentVNode, parent, dom, next, props)

Functional components:
- onComponentDidAppear(dom, props)
- onComponentWillDisappear(dom, props, callback)
- onComponentWillMove(parentVNode, parent, dom, next, props)

When you implement these, inferno will call them and pass the DOM-node of the component instance right after the component has been added or right before the component will be removed. Inferno will delay the removal of the actual DOM-node until you call the callback method allowing you to complete a removal animation.

Inferno-animation exposes three base classes to provide you with an easy way of animating your class components and helper methods to animate functional components.

- AnimatedComponent -- animates on add/remove
- AnimatedMoveComponent -- animates on move (within the same parent)
- AnimatedAllComponent -- animates on add/remove and move (within the same parent)

If you don't want to extend from one of the pre-wired components, look att src/AnimatedAllComponent.ts to see
how to wire up the three animation hooks:

- componentDidAppear
- componentWillDisappear
- componentWillMove

There are a couple of examples of animations in the main repos in the `docs/animations` and `docs/animations-demo` folder


### Creating an animated component

#### Class Component
With inferno-animation you get a new base class called `AnimatedAllComponent`. It has all three animation lifecycle events implemented for you.

By extending this base class instead of `Component` your component will animate on add and remove using CSS-animations that you can easily customize.

```JSX
import { Component } from 'inferno';
import { AnimatedAllComponent } from 'inferno-animation';

class Animated extends AnimatedAllComponent {
  render({className, children}) {
    return <div className={className}>{children}</div>
  }
}

class MyComponent extends Component {
  render() {
    return <Animated animation="HeightAndFade">[...]</Animated>
  }
}
```

#### Functional Component
Two helper methods are exposed by inferno-animation. You can use them to activate animations on functional components.

```JSX
import { Component } from 'inferno';
import { componentDidAppear, componentWillDisappear, componentWillMove } from 'inferno-animation';

function Animated ({className, children}) {
  return <div className={this.props.className}>{children}</div>
}

class MyComponent extends Component {
  render() {
    return <Animated
      onComponentDidAppear={componentDidAppear}
      onComponentWillDisappear={componentWillDisappear}
      onComponentWillMove={componentWillMove}
      animation="HeightAndFade">[...]</Animated>
  }
}
```

In both cases, if you don't specify the property `animation="[AnimationPrefix]"` it will default to `inferno-animation`.


### Customizing CSS animations
When you specify the animation property `<MyComponent animation="HeightAndFade">...</MyComponent>` the component will animate according to the following CSS-classes when appearing in the DOM:

- .HeightAndFade-enter {}
- .HeightAndFade-enter-active { /* the actual transitions */ }
- .HeightAndFade-enter-end {}

The following when disappearing:

- .HeightAndFade-leave {}
- .HeightAndFade-leave-active { /* the actual transitions */ }
- .HeightAndFade-leave-end {}

And the following on moves:

- .HeightAndFade-move-active { /* the actual transitions */ }

There are some important rules for smooth animations. Always style the animated component with:

- box-sizing: border-box;
- margin: 0;

Border-box will allow width and height to be calculated properly. This makes it possible to animate these properties on dynamically sized components.

Setting margin to zero will prevent overlapping margins, which could cause a jump when elements are removed. The wierd behaviour with overlapping margins has been implemented in browsers since the dawn of CSS and made sense for text rendering, but is a nuissance anywhere else.

Here is an example of CSS for `<MyComponent className="MyComponent" animation="HeightAndFade">` using SCSS. In the example, the disappear (leave) animation will be a slightly quicker reverse version of the appear (enter) animation:

```scss
.MyComponent {
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0.5rem;
  border: 1px solid black;
  background-color: white;
  overflow-y: hidden; // hide any overflow on animation axis
}

.HeightAndFade {
  &-enter,
  &-leave-end { // Start and end with element collapsed and fully transparent
    height: 0;
    opacity: 0;
  }

  &-enter-active {
    transition: all 0.5s ease-in;
    pointer-events: none; /* (optional) prevent hover to fire transition events causing early termination */
  }

  &-leave-active {
    transition: all 0.2s ease-out;
    pointer-events: none; /* (optional) prevent hover to fire transition events causing early termination */
  }

  &-enter-end,
  &-leave { // Animate to and from full height with full opacity
    height: auto;
    opacity: 1;
  }

  &-move-active {
    /* Move animation transitions */
    transition: transform 1.5s;
    z-index: 1;
  }
}
```

### The animation lifecycle of an animation handler
This is an explanation of how the helper methods in inferno-animation work. The lifecycle of an animation consists of five phases:

1. Measure width and height

{'fraction_non_alphanumeric': 0.0838506350873842, 'fraction_numerical': 0.004202081940597842, 'mean_word_length': 4.389603705609882, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4131604', 'n_tokens_mistral': 2856, 'n_tokens_neox': 2717, 'n_words': 1184}