Menu icon Foundation
easing effects for top-bar, accordion and tabs?

Has anyone implemented easing effects on the top-bar, accordion and tabs?
What is the best way to get this implemented?

Thanks,

Easing effectsaccordiontabstop bar

Has anyone implemented easing effects on the top-bar, accordion and tabs?
What is the best way to get this implemented?

Thanks,

Nathaniel Flick almost 5 years ago

For accordion I just updated dd to section:

$(".accordion").on("click", "section", function () {
$("section.active").find(".content").slideUp("slow");
if(!$(this).hasClass("active")) {
$(this).find(".content").slideToggle("slow");
}
});

And it works great.

Alex Plaza over 5 years ago

Hi, I found this http://goo.gl/MzaV9J

just chage the "sections" for "dds" and work for me to animate the accordions on F5

$(".accordion").on("click", "dd", function (event) {
       $("dd.active").find(".content").slideToggle("slow");
       $(this).find(".content").slideToggle("slow");
 })

c:

Adam Ransome about 5 years ago

A cleaner way of doing it would be:

$(document).ready(function() {
  $(".accordion").on("click", "dd", function () {
    $("dd.active").find(".content").slideUp("slow");
    if(!$(this).hasClass("active")) {
      $(this).find(".content").slideToggle("slow");
    }
  });
});

This stops the toggle executing twice when clicking on an item that currently has the .active class. Hope this helps somebody out!

Asif over 5 years ago

ok I got this to work with top-bar by the solution given here:

https://github.com/zurb/foundation/issues/2448

as indicated in the response by suncat100:

"
I havent checked the code, but that SASS should render the following CSS code, which you must make sure loads after the default foundation CSS. It's a bit ugly, because I had to make sure it was specific enough to overwrite what is set in foundation.

.top-bar-section ul li.has-dropdown .dropdown {
display:block;
visibility: hidden;
opacity: 0;
}
.top-bar-section ul li.has-dropdown:hover > .dropdown {
visibility: visible;
opacity: 1;
}

The above has no animations, but if it works, it means you can just simply add CSS3 transition and it will animate between opacity states. I have added some transform FX also to mine ...

"

Chris Morrow over 4 years ago

CSS only solution. Works great for me. Not IE 9 and under does not support CSS transitions.

// SCSS (convert to css if you need to)
.accordion .accordion-navigation > {
  a { position:relative; z-index: 10;}
  .content {
    //  display:block; overflow:hidden;
    padding:0 0.9375rem;
    height:0; display:block;
    @include opacity(0);
    transition: all 0.5s ease;

    &.active { height: auto; padding: 0.9375rem; @include opacity(1); }
  }
}

Damien about 4 years ago

Helpful css only answer working for tabs with Foundation for Sites v5 :

http://stackoverflow.com/a/21129153/1356340

.tabs-content {
  *zoom: 1;
  margin-bottom: 1.5rem; 

  /* Customized */
  display:block:important!
  opacity: 0;
}
  /* Customized */
  @-webkit-keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }
  @keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }
  .tabs-content:before, .tabs-content:after {
    content: " ";
    display: table; }
  .tabs-content:after {
    clear: both; }
  .tabs-content > .content {
    display: none;
    float: left;
    padding: 0.9375rem 0; }
    .tabs-content > .content.active {

      /* Customized */
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;
      opacity: 1;

      display: block; }

Rafi Benkual about 4 years ago

Right, JS animations will be easiest since the height is being calculated. CSS transitions cannot animate to height auto, so you 'll need to set a min-height

More examples:

http://codepen.io/sandwich/pen/vEXbyx
http://codepen.io/rafibomb/pen/KwBmKz

Lynda Spangler over 5 years ago

I was having trouble with the above code. I used this code:

 $(".accordion").on("click", "dd:not(.active)", function (event) {
  $("dd.active").removeClass('active').find(".content").slideUp("slow");
  $(this).addClass('active').find(".content").slideToggle("slow");
  });

Julie Lewis over 4 years ago

Nathaniel's Fix works great, but now multi_expand: true; doesn't work.

Kirsten Cassidy about 5 years ago

Part of the problem is that the element that go from display: none to display: block. This from MDN:

Care should also be taken when using a transition immediately after adding the element to the DOM using .appendChild() or removing its display: none; property. This is seen as if the initial state had never occurred and the element was always in its final state. The easy way to overcome this limitation is to apply a window.setTimeout() of a handful of milliseconds before changing the CSS property you intend to transition to.