Zurb Foundation 显示禁用动画答案

【问题标题】：Zurb Foundation Reveal Disable AnimationZurb Foundation 显示禁用动画
【发布时间】：2013-07-12 19:56:54
【问题描述】：

我正在尝试禁用 Foundation 的 Reveal 动画，但它仍在动画中。

这是我的小提琴和代码：

<script>
  $('#videoModal').reveal({  
       animation: 'none' //fade, fadeAndPop, none
  });
</script>

<a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>
<div id="videoModal" class="reveal-modal large">
  <h2>This modal has video</h2>
  <div class="flex-video">
    <iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
  </div>
  <a class="close-reveal-modal">&#215;</a>
</div>

【问题讨论】：

标签： javascript modal-dialog zurb-foundation

【解决方案1】：

将您的 JavaScript 调用更改为以下内容：

$(document).foundation('reveal', {animation: 'none'});

这是 jsFiddle：http://jsfiddle.net/pSQjj/1/

至少在这个 jsFiddle 中，看起来可能存在关闭模式窗口并将动画设置为 none 的错误，而如果您将配置更改为 fade，它会正确关闭strong> 或 fadeAndPop。如果您在自己的应用中发现相同的错误，请告诉我，我会向 Zurb 的伙计们报告。

【讨论】：

我看到与{animation: 'none'} 相同的错误。但是，{animation: 'fade'} 和 {animation: 'fadeAndPop'} 确实为我工作。谢谢。
可以确认，它不关闭动画：'none'。事实上，这也会阻止顶栏下拉菜单的工作。
作为一个 hacky 解决方法，您可以使用 $(document).foundation('reveal', {animation_speed: 1});。通过这种方式，它可以正确设置动画并关闭（几乎是瞬间 1 毫秒）。

【解决方案2】：

将您的 JavaScript 调用更改为以下内容：

$(document).foundation('reveal', {animation: false});

问题是，如果您关闭动画，模态不会动画到您在页面上的位置（如果您向下滚动页面） - 所以请注意这一点。

【讨论】：

作为一个 hacky 解决方法，您可以使用 $(document).foundation('reveal', {animation_speed: 1});。通过这种方式，它会在页面上的正确位置进行动画处理（几乎是 1 毫秒）。