您如何为 Zurb Foundation 4 中手风琴部分的打开和关闭设置动画？答案

【问题标题】：How do you animate the opening and closing of accordion sections in Zurb Foundation 4?您如何为 Zurb Foundation 4 中手风琴部分的打开和关闭设置动画？
【发布时间】：2013-10-08 05:07:20
【问题描述】：

您如何为 Zurb Foundation 4 中手风琴部分的打开和关闭设置动画？

我在 Zurb Foundation 的 Google 小组中进行了广泛的搜索，但也找不到任何答案。

【问题讨论】：

标签： accordion zurb-foundation animated

【解决方案1】：

我写了一个相当简单的 jQuery 插件来让它工作。该插件具有默认选项，同时还允许通过 data-options 属性进行覆盖。

在 Foundation 5 上测试。

这是插件：

(function($) {
    $.fn.accordionAnimated = function() {

        var
            $accordion = this,
            $items = $accordion.find('> dd'),
            $targets = $items.find('.content'),
            options = {
                active_class : 'active',    // class for items when active
                multi_expand: false,        // whether mutliple items can expand
                speed : 500,                // speed of animation
                toggleable: true            // setting to false only closes accordion panels when another is opened
            }
        ;

        $.extend(options, Foundation.utils.data_options($accordion));

        $items.each(function(i) {
            $(this).find('a:eq(0)').on('click.accordion', function() {
                if(!options.toggleable && $items.eq(0).hasClass(options.active_class)) {
                    return;
                }

                $targets.eq(i)
                    .stop(true, true)
                    .slideToggle(options.speed);

                if(!options.multi_expand) {
                    $targets.not(':eq('+i+')')
                        .stop(true, true)
                        .slideUp(options.speed);
                }
            });
        });
    };
}(jQuery));

并且插件只是通过调用

$('.accordion').accordionAnimated();

希望这对某人有所帮助。

【讨论】：

【解决方案2】：

假设您使用的是 Foundation 的 HTML 类：

.top-bar-section {
  -webkit-transition: 0.2s all ease-in;
  -moz-transition: 0.2s all ease-in;
  -o-transition: 0.2s all ease-in;
  transition: 0.2s all ease-in; 
}

【讨论】：

嗨，Shawn，我尝试将它添加到我的 style.css 文件中，但它没有为手风琴部分的打开或关闭设置动画？这是我用于手风琴的 HTML 类：
您可以尝试使用 .section-container 类作为您的选择器 - 如果不查看您的代码或不知道您使用的是什么版本的 Foundation，这很难说。我的答案基于 Foundation 4.3 文档中的代码。
我正在使用 Foundation 5 的示例，代码在这里：foundation.zurb.com/docs/components/accordion.html --- 我尝试将您的建议应用于“.accordion .content.active”选择器，但它没有不工作。谢谢，肖恩！
Shawn 发布的 CSS sn-p 与手风琴组件无关（它与 topbar 组件有关），也不是对 Trinity 的情况有用的 mixin。如果 OP 使用 SCSS，则用于添加过渡的正确 mixin 是 '@include single-transition()'