lazyfade懒加载过渡动画效果教程
懒加载：即窗口滚动到目标处才会执行相应动作
你只需引入jsAnimate.js文件，然后在你期望的元素class属性中加入lazyfade、fadein-left等类名，即可实现效果。值得注意的是，js仅当所有网页文档加载完成后才会执行，所以可能会有些延迟，不过请放心，在js没有执行之前，网页所有元素都会暂时先正常显示在该在的位置。下面我将具体解释不同类名对应的效果。这段文字使用了fadein-right-r效果，左边的图片使用了fadein-left-r(离开时有fadeout效果)并与animate.css的swing动画结合使用，并且设定了type，从而淡入时先执行过渡效果后执行动画，淡出反之。
警告：无论你想实现什么效果，要想正常使用，该元素class属性中必须首先有lazyfade类名，你可以把它理解成一个供js识别的标识符。
注意：考虑到使用体验，在你使用-r类型的效果时，fadein（淡入）过程中设置了一个时间死区，在fadein期间不会执行fadeout（淡出）。
- lazyfade: 必须具备的类名（现在，若觉得提供的默认基础效果种类有限，可自定义效果甚至第三方动画，教程见列表下方3.30新增）
- fadein-left: 当元素出现在可视窗口时，从左到右移入，并逐渐显示，然后不再变化
- fadein-right: 当元素出现在可视窗口时，从右到左移入，并逐渐显示，然后不再变化
- fadein-top: 当元素出现在可视窗口时，从上到下移入，并逐渐显示，然后不再变化
- fadein-bottom: 当元素出现在可视窗口时，从下到上移入，并逐渐显示，然后不再变化
- zoomin: 当元素出现在可视窗口时，由小变大，然后不再变化
- lazyfade-r: 当元素出现在可视窗口时，只在原处逐渐显示；当元素离开可视窗口时，只在原处逐渐消失。
- fadein-left-r: 当元素出现在可视窗口时，从左到右移入，并逐渐显示；当元素离开可视窗口时，从右到左移出，并逐渐消失。
- fadein-right-r: 当元素出现在可视窗口时，从右到左移入，并逐渐显示；当元素离开可视窗口时，从左到右移出，并逐渐消失。
- fadein-top-r: 当元素出现在可视窗口时，从上到下移入，并逐渐显示；当元素离开可视窗口时，从下到上移出，并逐渐消失。
- fadein-bottom-r: 当元素出现在可视窗口时，从下到上移入，并逐渐显示；当元素离开可视窗口时，从上到下移出，并逐渐消失。
- zoomin-r: 当元素出现在可视窗口时，由小变大；当元素离开可视窗口时，由大变小并消失。
新增：你现在可以通过在元素标签里加入duration属性，以显式的定制进入和移出的持续时间、延迟时间、贝塞尔曲线等时间函数以及结合动画使用。在元素标签里加入transition-enter属性，来替换插件提供的初始过渡样式，以自定义样式。比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。同时还可以搭配动画效果使用，兼容第三方动画库。duration属性的某些用法参考了vue的设计。所以用过vue的用户可以会比较容易上手。下面的代码将更晚出现，且动作似乎有些特殊，显示的即是它所用的代码
<div...duration="{ enter: 1500, delay: 1500, bezier: cubic-bezier(.34,.41,.5,1.92) }">...</div>
transition-enter: <div...transition-enter="transform:translate3d(150px, -150px, 0);opacity:0;">...</div>
enter: 进入过渡的时间; leave: 离开过渡的时间; delay: 效果延迟时间; bezier: 贝塞尔曲线(或ease等)
transition-enter: 自定义过渡开始时元素的初始样式（类似vue中的v-enter）
如果时间不加单位默认毫秒(ms)，字符串不需要加引号。如果没有duration默认是transtion: all 1s ease 0s，如果有用户自定义属性duration或者有原生style样式，那么以它们为准；如果duration和原生style都存在, 会取代原生style以duration为准。
下面将讲解如何使用duration中的动画效果，以及如何与过渡效果结合使用
除了过渡效果外，你还可以向其中添加自定义动画。这对于过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。
<div class="lazyfade fadein-left" duration="{ animation: animated tada, type: transition }">...</div>
你可以像上面这段代码一样，在duration中的animation属性里添加动画相关的类名，来实现动画效果，多个类名之间用空格隔开。除了使用第三方动画库，你也可以使用自己编写的动画(如最后的例子)不过我建议你先接着往下看。你需要注意animation中添加的是类名而不是keyframes名。
如果你的代码里，过渡效果（如class="lazyfade fadein-left"）和动画效果（如duration="{ animation: animated tada }"）同时存在。你可能会想，这两者会不会有冲突，它们的先后顺序怎么定义呢？
放心！首先，jsAnimate帮你解决了冲突问题，由于transform和animation不能共存，js会在目标元素外层创建一个新的父元素，让这个父元素执行transform，原先的元素只执行animation。
其次，关于执行顺序问题。在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要监听的类型。
像上面的代码一样，当type: transition时，先执行过渡效果，结束后执行动画效果；当type: animation时，先执行动画效果，结束后执行过渡效果；如果不设置type，两种效果将同时执行。当离开过渡时，它们会以相反的顺序执行。
有时，某个元素的效果开始执行的时间可能会依赖其他元素的完成时间。这时虽然你可以使用delay属性设置延迟时间，来达到其他元素效果完成后该元素才动的目的；但是，当这种依赖关系很多时，通过delay属性来设置延迟会显得非常麻烦、复杂且容易出错。下面将推荐duration中的标记属性，让你可以绑定元素之间的时间依赖关系，不需要手动计算。
比如：<div...duration="{ follow: follow1 }">...</div>依赖了
<div...duration="{ target: target1 }">...</div>的完成时间
