Index

• Overview
• Demo

Overview

Why use animations? A compelling reason is that animation can significantly enhance the user experience, otherwise the abrupt interface changes may be confusing users.

CSS animations are implemented in two ways: transition and animation, either way to use js to drive is a very painful thing, such as to set an id as mydiv the div element of the background color to red in animation, the following code is required:

var mydiv = document.getElementById('mydiv');
mydiv.style.setProperty('background', 'red');
mydiv.style.setProperty('transition', 'background 0.5s');
mydiv.style.setProperty('-webkit-transition', 'background 0.5s');
var handleTransitionEnd = function (e) {
    console.log(e);//Custom logic after animation completes

    mydiv.style.setProperty('transition', '');//Cleanup after the animation completes
    mydiv.style.setProperty('-webkit-transition', '');
    mydiv.removeEventListener('transitionend', handleTransitionEnd);
    mydiv.removeEventListener('webkitTransitionEnd', handleTransitionEnd);
}
mydiv.addEventListener('transitionend', handleTransitionEnd);
mydiv.addEventListener('webkitTransitionEnd', handleTransitionEnd);

As we can see, if using js to set style, we not only have to deal with the animation itself, but also to consider the browser compatibility, there are some clean-up work after the animation completes, simple background color change incredibly so much code! Next we change the solution and use this plug-in to do the work:

ht.Default.animate('#mydiv')
            .set('background', 'red')
            .end(function (e) {
                console.log(e);//Custom logic after animation completes
            });

So much clearer that the animate function can be a css selector or a DOM object that can then be chained to multiple styles:

ht.Default.animate('#mydiv')
            .set('background', 'red')
            .set('opacity', '0'),
            .scale(2, 2)
            .end(function (e) {
                console.log(e);//Custom logic after animation completes
            });

In this animation process changed the background, opacity, transform: scale three style at same time, if in the original way, the amount of code and readability can not control!

This plug-in also supports animation queues:

ht.Default.animate('#mydiv')
            .set('background', 'red')
            .set('opacity', '0'),
            .scale(2, 2)
            .then()
                .set('left', '200px')
                .set('top', '200px')
            .pop()
            .end(function (e) {
                console.log(e);//Custom logic after animation completes
            });

The above code defines two animations, the first is the background, opacity, transform: scale style animation process, this animation completes then starts the second animation to change left and top style

API description: This plug-in is adds a animation function in ht.Default, which can be either a css selector or a DOM object that returns an instance of animate object (no need to be created through the new keyword), we see the set, scale, then and end, etc., functions are all such public APIs, and the complete API list is as follows:

• set(prop, propValue) Sets css style, prop is style names, such as width, opacity, etc., propvalue is style values, such as '200px', '0', etc.
• then() Adds a new animation process to the animation queue
• pop() Returns the previous animation process of the current animation process, typically called end() by the first animation procedure in the queue, so a few then() should be called pop()
• end(callbackFunc) To start the current animation process, you can introduce a function after the animation queue is completed callback
• translate(x, y) Converts to transform: translate(x, y), the parameter can be a number(as 'px'), or a string metric('10px', '20em', etc.)
• translateX(n) Converts to transform: translateX(n) parameters can be numeric or string measures
• tx(n) Is the same as translateX(n)
• translateY(n) Converts to transform: translatey(n) parameters can be numeric or string measures
• ty(n) Is the same as translateY(n)
• scale(x, y) Converts to transform: scale(x, y)
• scaleX(n) Converts to transform: scaleX(n)
• scaleY(n) Converts to transform: scaleY(n)
• rotate(n) Converts to transform: rotate(n)
• skew(x, y) Converts to transform: skew(x, y)
• skewX(n) Converts to transform: skewX(n)
• skewY(n) Converts to transform: skewY(n)
• duration(n) Sets the duration of the animation
• delay(n) Sets the animation delay startup time

• ease(n) Sets the easing mode, in addition to the css internal easing mode, HT has expanded a lot of easing mode, the list is as follows:

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • ease-in-quad
  • ease-in-cubic
  • ease-in-quart
  • ease-in-quint
  • ease-in-sine
  • ease-in-expo
  • ease-in-circ
  • ease-in-back
  • ease-out-quad
  • ease-out-cubic
  • ease-out-quart
  • ease-out-quint
  • ease-out-sine
  • ease-out-expo
  • ease-out-circ
  • ease-out-back
  • ease-in-out-quad
  • ease-in-out-cubic
  • ease-in-out-quart
  • ease-in-out-quint
  • ease-in-out-sine
  • ease-in-out-expo
  • ease-in-out-circ

  • ease-in-out-back

    The difference between these easing modes can be referred to here: Easing Curve

Before using this plug-in, you need to introduce ht-cssanimation.js files:

<script src="ht.js"></script> <!--Introduce ht.js file first-->
<script src="ht-cssanimation.js"></script>

Demo

Click the div in the example below to view the animation effect: