2018-08-06 Animate.css 使用

1.介绍

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

2.使用

1).笔记

在Github里下载代码，找到Animate.css，引用到项目中；
npm 安装命令 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

<h1 class="animated infinite bounce delay-2s">Example</h1>

Check out all the animations here

---

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:
<div class="animated bounce delay-2s">Example</div>

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
        }