阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jquerykeyframes 中文API文档

      插件 jquerykeyframes 中文API文档

      源码 & 下载

      jQuery-Keyframes允许动态生成具有回调事件和其他优点的CSS3关键帧。

      这个库是Keyframes.js的包装器,它是一个vanilla js库,允许动态生成带有回调事件和其他好处的CSS关键帧。

      概观

      CSS3引入了奇特的功能,如转换,平移,旋转和缩放。jQuery有一个非常好的内置$(选择器).animate()函数,可以轻松设置这些动画。但是,jQuery的animate()不支持多个关键帧。jQuery.Keyframes可以帮助您实现这一目标。

      要求

      <script src='http://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
      

      安装

      使用以下行在文档中包含脚本:

      <script src='/path/to/jquery.keyframes[.min].js'></script>
      

      只有在页面加载后才能定义和播放动画window.onload。

      用法

      检测CSS动画支持

      var supportedFlag = $.keyframe.isSupported();
      

      添加新动画序列(关键帧)

      $.keyframe.define([{
          name: 'trapdoor-sequence',
          '0%': {'height': '70px'},
          '30%': {'height': '10px'},
          '60%': {'height': '30px'},
          '100%': {'height': '10px'}
      }]);
      

      添加单帧样式

      $.keyframe.define({
          name: 'ball-roll',
          from: {
              'transform': 'rotate(0deg)'
          },
          to: {
              'transform': 'rotate(360deg)'
          }
      });
      

      添加多个框架样式

      $.keyframe.define([{
      	name: 'roll-clockwise',
      	'0%': {
      	    'margin-left' : '0px',
      	    'background-color' : 'red',
      	    'transform' : 'rotate(0deg)'
      	},
      	'100%': {
      	    'margin-left' : '600px',
      	    'transform' : 'rotate(360deg)'
      	}
          },{
      	name: 'roll-anti-clockwise',
      	'0%': {
      	    'margin-left' : '0px',
      	    'background-color' : 'red',
      	    'transform' : 'rotate(0deg)'
      	},
      	'100%': {
      	    'margin-left' : '600px',
      	    'transform' : 'rotate(-360deg)'
      	}
          }
      ]);
      

      以数组方式添加样式和属性

      给出了CSS样式定义的相似之处

      var shake_start = {'transform': 'translate(0px)'};
      var shake_odd1 = {'transform': 'translate(-10px, -10px)'};
      var shake_even1 = {'transform': 'translate(10px, 10px)'};
      var shake_odd2 = {'transform': 'translate(10px, -10px)'};
      var shake_even2 = {'transform': 'translate(-10px, 10px)'};
      
      $.keyframe.define([{
      	name: 'crazy',
      	'0%': shake_start,
      	'10%': shake_odd2,
      	'20%': shake_even1,
      	'30%': shake_odd2,
      	'40%': shake_even2,
      	'50%': shake_odd2,
      	'60%': shake_even1,
      	'75.3%': shake_odd1,
      	'80.45%': shake_even2,
      	'91.6%': shake_odd1
          }
      ]);
      

      请注意,您可以根据需要向阵列添加任意数量的属性

      响应动画

      $.keyframe.define([{
          name: 'roll-clockwise',
          media: 'screen and (max-width: 700px)',
          from: {
              'margin-left' : '0px'
          },
          to: {
              'margin-left' : '600px'
          }
          }
      ]);
      

      播放动画

      可用的css3动画方法在这里有更好的记录:http://www.w3schools.com/css/css3_animations.asp

      $(selector).playKeyframe({
          name: 'trapdoor-sequence', // name of the keyframe you want to bind to the selected element
          duration: '1s', // [optional, default: 0, in ms] how long you want it to last in milliseconds
          timingFunction: 'linear', // [optional, default: ease] specifies the speed curve of the animation
          delay: '0s', //[optional, default: 0s]  how long you want to wait before the animation starts
          iterationCount: 'infinite', //[optional, default:1]  how many times you want the animation to repeat
          direction: 'normal', //[optional, default: 'normal']  which direction you want the frames to flow
          fillMode: 'forwards', //[optional, default: 'forward']  how to apply the styles outside the animation time, default value is forwards
          complete: function(){} //[optional] Function fired after the animation is complete. If repeat is infinite, the function will be fired every time the animation is restarted.
      });
      

      播放动画(速记)

      $(selector).playKeyframe(
          'trapdoor-sequence 1s linear 0s infinite normal forwards',
          complete
      );
      

      播放多个动画

      $(selector).playKeyframe([
          'trapdoor-sequence 1s linear 0s infinite',
          {
            name: 'ball-roll',
            duration: "3s",
            timingFunction: 'ease',
            iterationCount: 1
          }
      ], complete);
      

      重置动画

      $(selector).resetKeyframe(callback);
      

      冻结关键帧动画并杀死回调

      $(selector).pauseKeyframe();
      

      恢复关键帧动画

      $(selector).resumeKeyframe();
      
      目录
      目录