基于AngularJS和css3动画写的浮动效果

引用了Foundation框架进行布局,因此在中引入foundation的css样式(可以找cdn直接引入),再引入angularJS的js文件。


正文

使用ng-repeat循环添加图片

基于AngularJS和css3动画写的浮动效果_第1张图片

添加CSS样式:


基于AngularJS和css3动画写的浮动效果_第2张图片

通过ng-mouseenter和ng-mouseleave来切换图片的动画的效果, ng-class里面放入两种浮动的动画效果, animation-fill-mode:forwards;让动画停在我想让它停留的最后一帧。

你可能感兴趣的:(基于AngularJS和css3动画写的浮动效果)