Foundation-sites: [Off-canvas] Foundation 6.3 "$offcanvas-transition-length" Sass variable overlaps the "data-transition-time" plugin option.

[drionix]

How can we reproduce this bug?
Setting off-canvas "data-transition-time" plugin option to value other than 500. E.g : data-transition-time="300"

What did you expect to happen?
Off-canvas open and close transition time should follow the value set in "data-transition-time" plugin option. In this example, it should be 300ms.

What happened instead?
Off-canvas open and close transition time is still 500ms.

Why this happen?
This bug happens because the "$offcanvas-transition-length" Sass variable, which by default is 0.5s, is overlapping with the "data-transition-time" plugin option. So no matter what value we set in the "data-transition-time" plugin option, the open and close transition time will still follow the value of the "$offcanvas-transition-length" Sass variable, which is 0.5s.

Sorry I'm unable to give a link to a CodePen or JSFiddle to recreates the issue since I haven't found any Foundation 6.3 CDN

[ncoden]

For Foundation 6.3 CDN, see: https://github.com/zurb/foundation-sites/blob/master/.github/ISSUE_TEMPLATE.md

[ncoden]

$offcanvas-transition-length overlap the data-transition-time options only when the option is not set or equal to 0 (js/foundation.offcanvas.js:75).

The problem is the transitionTime option is never used. @brettsmason Any thoughts on this ?

[brettsmason]

@ncoden I'll have a look back through how it used to be handled and worked. My gut would say remove the option completely as I feel like it should be controlled with the variable, but would like to hear what @kball thought too

[kball]

@brettsmason The only problem I see with using only sass variable is that it makes it "global" without a builtin way to specify transitions per off-canvas. (you'd need to add classes and target them independently, whereas with the data option you could just do it inline).

The challenge here is that animation seems to bridge between "style" and "behavior"... our general practice is to have (as much as possible) stylistic things dealt with using classes, and behavioral things in data attributes...

If we want to keep both, I suppose what we could do is have an 'auto' default for the JS option that falls back to the scss defined value.

[ncoden]

The only problem I see with using only sass variable is that it makes it "global"

Only because it is not easy to create your own offcanvas and customize it with modifiers. We could have something like this:

.homepage-offcanvas {
  @include off-canvas-transition($duration: ...);
}

[kball]

@brettsmason did we have a conclusion on this? Would like to get it resolved for 6.4