实现多个元素CSS3过渡效果的js插件

AnimateTransition是一款允许在多个元素之间制作CSS3过渡效果的js插件。该过渡效果插件可以在不同的场合中使用，可以用于制作页面过渡效果，也可以用于制作各种模态窗口。

该CSS3过渡效果插件通过使用硬件加速的CSS转换功能来增强其性能。它提供了12种预置的blocks动画过渡效果，和8种弹出模态窗口的过渡效果。

该CSS3过渡效果插件没有任何外部依赖，它可以在所有的现代浏览器中运行，包括：Firefox 31+, Chrome 31+, Safari 7+, Opera 27+, IE 10+, iOS Safari 6.0+, Android Browser 2.3+。

特点

和其他的CSS过渡效果动画库不同（每次只执行一个元素的过渡效果），AnimateTransition允许你在两个或多个元素之间进行过渡动画。它单独提供了一些样式和回调函数来确保过渡效果的正确执行。

与使用纯CSS来制作动画过渡效果相比较，该插件提供了一个助手，可以帮助你在所有的浏览器中实现回调函数。它的各种预置动画都是经过优化的，能良好的工作。

使用方法

使用该CSS动画过渡效果插件要引入animateTransition.min.js 和 transitions.css文件。

<link rel="stylesheet" href="transitions.css"/>

<script src="animateTransition.min.js"></script>              
              

方法

blocksTransition

blocksTransition(options)                
              

在该方法中可以传入一个对象参数。该对象参数有下面的选项：

• container ：过渡动画元素的容器。如果该参数未设置，将使用document.body。
• blockIn ：执行进入过渡动画的block元素。如果未定义，blockOut元素选择的过渡动画效果不会被执行。
• blockOut ：执行离开过渡动画效果的block元素。如未定义，blockIn元素选择的过渡动画效果将不会被执行。blockIn和blockOut至少要选择一个作为参数。container、blockIn和blockOut可以是CSS选择器或已经存在的DOM元素。
• animation ：过渡动画名称。目前的blocks过渡动画支持下面的效果：
  • slide-in
  • slide-out
  • fade-in
  • fade-out
  • cover-in
  • cover-out
  • cover-double-in
  • cover-double-out
  • revolution-in
  • revolution-out
  • bounce-in
  • bounce-out

  弹出模态窗口支持下面8种效果：

  • popup-scale-in
  • popup-drop-in
  • popup-revolution-in
  • popup-fade-in
  • cover-in
  • cover-left-in
  • cover-right-in
  • bounce-in

  要隐藏模态窗口，只需要将-in替换为-out：

  • popup-scale-out
  • popup-drop-out
  • popup-revolution-out
  • popup-fade-out
  • cover-out
  • cover-left-out
  • cover-right-out
  • bounce-out

  要通过animation_name来创建自定义的动画名称，你需要在container容器的CSS动画代码中添加class：.transition-animation_name，为blockIn动画添加class：.animation_name-transition-view-to-show和为blockOut动画添加 .animation_name-transition-view-to-hide。

  • beforeTransition(blockIn, blockOut, container)：过渡动画前执行的函数。如果设置为false，过渡动画将不会被执行。
  • onTransitionStart(blockIn, blockOut, container, e)：过渡动画开始时执行的函数。e是一个事件对象。
  • onTransitionEnd(blockIn, blockOut, container, e)：过渡动画结束时执行的函数。e是一个事件对象。

应用举例

在两个Block之间进行过渡动画。

AnimateTransition({
   container: '.container',
   blockIn: '.newElement',
   blockOut: '.oldElement',
   animation: 'slide-in'
});                
              

显示模态窗口。

AnimateTransition({
   container: '.container',
   blockIn: '.popup',
   animation: 'popup-scale-in'
});                
              

隐藏模态窗口。

AnimateTransition({
   container: '.container',
   blockOut: '.popup',
   animation: 'popup-scale-out'
});                
              

关于该插件的其它信息可以参考：https://github.com/Rapid-Application-Development-JS/AnimateTransition