每日一讲：masonry响应式页面布局(4)---动画效果(animate)

Masonry 的动画效果主要用在：

1.容器(container )大小改变，如：width或height属性改变。

2.浏览器窗口大小改变，实质也是容器的改变。

3.砖块位置的改变，如：left、right、top属性变化。

Masonry 可以通过2种方法为上述的变化过程设置动画：使用jquery动画、CSS transitions。

1.使用jquery动画

该方法在上文中已经说过，通过设置isAnimated参数为true，Masonry 会自动调用jquery的animate()方法完成动画过程同时利用animationOptions参数向animate方法内传入参数。

$('#container').masonry({
  // options...
  isAnimated: true,
  animationOptions: {
    duration: 750,
    easing: 'linear',
    queue: false
  }
});

2. CSS transitions

借助css3中提供的transition功能完成动画，有关CSS transitions 的知识请参考 CSS transitions。

由上篇文章我们知道，Masonry 在布局前或初始化时会自动为容器(container )添加.masonry类样式(即 class="masonry")，同时为砖块添加.masonry-brick( class="masonry-brick")，这样我们就可以如下为容器和砖块添加动画：

/*为容器在height、width属性上添加动画*/
.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

/*为砖块在left、right、top上添加动画*/
.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}

/*设置砖块动画的持续时间，可通过调整浏览器窗口大小观察*/
.masonry .masonry-brick {
  -webkit-transition-duration: 1.7s;
     -moz-transition-duration: 1.7s;
      -ms-transition-duration: 1.7s;
       -o-transition-duration: 1.7s;
          transition-duration: 1.7s;
}

3.利用Modernizr结合

modernizr是个js库，是个检测库，检测浏览器对HTML5/CSS3的特性的支持情况，是否支持某个属性。这样的话我们就可借助modernizr去检测浏览器是否支持CSS transitions，如果支持，则用CSS transitions动画，否则使用jquery动画。以使兼容性达到最佳的效果。可如下使用：

<script type="text/javascript" src="modernizr.js"></script>

$('#container').masonry({
  // options...
  isAnimated: !Modernizr.csstransitions
});

直接使用Modernizr.csstransitions句进行判断浏览器是否支持css transitions。

当浏览器支持CSS transitions特性时，此时 !Modernizr.csstransitions句的结果为false，则isAnimated参数被设置为false，jquery动画不起作用。

当浏览器不支持CSS transitions特性时，此时 !Modernizr.csstransitions句的结果为true，则isAnimated参数被设置为true，使用jquery动画。

modernizr项目托管在git，你可以通过以下地址获取它：

http://github.com/Modernizr/Modernizr

直接下载地址：https://github.com/Modernizr/Modernizr/archive/master.zip

+友情链接