js_animate

1.介绍

Animate.css 一个有封装好的动画效果集，跨浏览器css3动画库。
效果预览即首页
Github地址

2.使用

1).笔记

在Github里下载代码，找到Animate.css，引用到项目中；
npm 安装命令

install animate.css --save```

**Basic Usage**

Class Name
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat .

**Example**

Example

[Check out all the animations here](https://daneden.github.io/animate.css)

***
**Javascript Usage**
``` 1.$('#yourElement').addClass('animated bounceOutLeft');

2.一般使用

// See https://github.com/daneden/animate.css/issues/644
var animationEnd = (function(el) {
  var animations = {
    animation: 'animationend',
    OAnimation: 'oAnimationEnd',
    MozAnimation: 'mozAnimationEnd',
    WebkitAnimation: 'webkitAnimationEnd',
  };

  for (var t in animations) {
    if (el.style[t] !== undefined) {
      return animations[t];
    }
  }
})(document.createElement('div'));

$('#yourElement').one(animationEnd, doSomething);

3.扩展jquery 方法

$.fn.extend({
  animateCss: function(animationName, callback) {
    var animationEnd = (function(el) {
      var animations = {
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'mozAnimationEnd',
        WebkitAnimation: 'webkitAnimationEnd',
      };

      for (var t in animations) {
        if (el.style[t] !== undefined) {
          return animations[t];
        }
      }
    })(document.createElement('div'));

    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);

      if (typeof callback === 'function') callback();
    });

    return this;
  },
});

扩展后使用方法：

$('#yourElement').animateCss('bounce');
or;
$('#yourElement').animateCss('bounce', function() {
  // Do somthing after animation
});

Define Delay and Speed using Class
You can also add delays directly on the element’s class attribute, just like this:

class

Class Name|Delay Time
---|:--:
delay-2s|2s
delay-3s|3s
delay-4s|4s
delay-5s|5s

You can control the speed of the animation by adding these classes, as a sample below:
```<div class="animated bounce faster">Example</div>

Class Name	Speed Time
slow	2s
slower	3s
fast	800ms
faster	500ms

####2).运用
此次用的很少一部分功能，主要是想实现的功能：主div 点击下一步 到下一个div，中间使用animiate.css 来实现动画切换，时间有限，未能详细解决，只是个折中解决方案。

//子div 先隐藏
 $("#ChildCon").hide();
            //主div的下拉框变化后
            $("#MainType").on('change', function (data) {
                if ($("#MainType") !== "") {
//主div 添加动画效果，然后在回调函数中隐藏它
                    $("#ParentCon").animateCss("flipOutX", function () {
                        $("#ParentCon").hide();//隐藏主div
                        //var tpl = document.getElementById('tpl').innerHTML;
                        //var html = juicer(tpl, objdata);
                        $("#Conditions").html(html);
//子div 显示
//同时添加子div 的显示动画
                        $("#ChildCon").show();
                        //$("#ChildCon").animateCss("flipInX");
                    });
                }
            });

问题:在切换之间页面会跳出滚动条，体验不怎么好~~~

#####################20180807 ####
div切换时 跳出滚动条，页面抖动的解决方案：隐藏滚动条(不是解决方法的方法)

body {
            overflow-x: hidden;
            overflow-y: hidden
        }