jquery - 使用 Popcorn + jQuery 制作动画

Question

我想使用 Popcorn.js，它看起来非常适合管理视频。我现在正在使用脚注方法，一切正常。

     example.footnote({
       start: 2,
       end: 6,
       text: "Pop!",
       target: "layer"
     });

我想为使用 jQuery 创建的脚注设置动画(例如，我希望脚注淡入/淡出)。

您将如何处理？我不确定我是否可以混合使用 jQuery 和 Popcorn，而且我找不到那么多文档......我唯一的想法是使用 jQuery 检查我的 #layer div 中是否有一些文本，然后将其设置为动画，但我不确定这是否是好方法。

谢谢!

Answer 1

按原样使用 Popcorn 脚注插件并没有特别好的方法来执行此操作。它只是根据需要切换脚注上的 .style.display 属性，没有任何实用的方法来 Hook 它。

然而，脚注插件很简单，您只需复制它并制作一个具有您想要的行为的新插件。从 the source of the plugin in Popcorn 1.2 开始工作¹ 我们只需要更改几行，让它们淡入淡出:

(function ( Popcorn ) {
  Popcorn.plugin( "footnoteAnimated", { // <---
  _setup: function( options ) {

    var target = document.getElementById( options.target );

    options._container = document.createElement( "div" );
    options._container.style.display = "none";
    options._container.innerHTML  = options.text;

    if ( !target && Popcorn.plugin.debug ) {
      throw new Error( "target container doesn't exist" );
    }
    target && target.appendChild( options._container );
  },

  start: function( event, options ){
    $( options._container ).fadeIn(); // <---
  },

  end: function( event, options ){
    $( options._container ).fadeOut(); // <---
  },
  _teardown: function( options ) {
    document.getElementById( options.target ) && document.getElementById( options.target ).removeChild( options._container );
  }
});

})( Popcorn );

将其包含在您的项目中即可。使用您的示例(jsfiddle):

Popcorn("#video").footnoteAnimated({
  start: 2,
  end: 6,
  text: "Pop!",
  target: "target"
});

_{^1. 我删除了 Butter list 和注释以节省空间。如果您需要它们，您可以在上面链接的原始资源中找到它们。}