当前位置：首页 > 网页特效 > 动画效果

可替代CSS3 transition和transform的jQuery插件

分类：动画效果日期：2024-05-14 点击(1) 评论(0)

演示免费下载

简介

只需要在页面中引入jQuery1.4+和 jquery.transit.js 文件。

```html
<script src='jquery.js'></script>
<script src='jquery.transit.js'></script>
```
你也可以通过 bower 和 npm 来安装：

```html
$ bower install --save jquery.transit
$ npm install --save jquery.transit
```
#### 转换效果

------------

你可以在这个jQuery插件中使用所有的CSS属性来设置元素转换动画效果。

```html
$("#box").css({ x: '30px' });               // Move right
$("#box").css({ y: '60px' });               // Move down
$("#box").css({ translate: [60,30] });      // Move right and down
$("#box").css({ rotate: '30deg' });         // Rotate clockwise
$("#box").css({ scale: 2 });                // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
$("#box").css({ skewX: '30deg' });          // Skew horizontally
$("#box").css({ skewY: '30deg' });          // Skew vertical
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
$("#box").css({ rotateY: 30 });
$("#box").css({ rotate3d: [1, 1, 0, 45] });
```
该插件支持相对值。

```html
$("#box").css({ rotate: '+=30' });          // 30 degrees more
$("#box").css({ rotate: '-=30' });          // 30 degrees less
```
所有的单位都是可选的。

```html
$("#box").css({ x: '30px' });
$("#box").css({ x: 30 });
```
多个参数可以使用逗号分隔或使用一个数组。

```html
$("#box").css({ translate: [60,30] });
$("#box").css({ translate: ['60px','30px'] });
$("#box").css({ translate: '60px,30px' });
```
该插件还支持获取值Getters（如果获取的值是多个会返回一个数组）

```html
$("#box").css('rotate');     //=> "30deg"
$("#box").css('translate');  //=> ['60px', '30px']
```
#### 动画 - $.fn.transition

------------

你可以通过$.fn.transition()来制作CSS3 transitions 动画。它的工作方式类似$.fn.animate()，只是它使用的是CSS3 transitions

```html
$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything
```
你可以像$.fn.animate()那样在参数中使用duration、easing 和 complete。

```html
$("#box").transition({
  opacity: 0.1, scale: 0.3,
  duration: 500,
  easing: 'in',
  complete: function() { /* ... */ }
});
```

web299.com

可替代CSS3 transition和transform的jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果