-
Replies
Hi All,
Am trying to create a working example from - Advanced Foundation | Lesson #103
http://zurb.com/university/lessons/create-custom-animations-and-transitions-with-motion-ui
The first step using "fadeIn" and "fadeOut" does not seem to work.
But step two, using 'hingeOut' and 'hingeIn' seems to be fine.
Am I missing something obvious.
Here is an example of the issue:
http://www.naked-dom.cpdev.net/
any help would be very grateful,
cheers
Dominique
// Foundation JavaScript // Documentation can be found at: http://foundation.zurb.com/docs $(document).foundation(); var $button = $('#button'); var $panel = $('#panel'); $button.click(function() { if ($panel.is(':visible')) { MotionUI.animateOut($panel, 'fadeOut'); } else { MotionUI.animateIn($panel, 'fadeIn'); } }); var $button2 = $('#button2'); var $panel2 = $('#panel2'); $button2.click(function() { if ($panel2.is(':visible')) { MotionUI.animateOut($panel2, 'hingeOut'); } else { MotionUI.animateIn($panel2, 'hingeIn'); } });
And here is the app.scss
@import "settings"; @import "foundation"; .fish { text-align: left; } @import "motion-ui"; @include motion-ui-transitions; .hingeIn { @include mui-hinge(in); } .hingeOut { @include mui-hinge(out); } .chips { text-align: left; } // Or selectively include components // @import // "foundation/components/accordion", // "foundation/components/alert-boxes", // "foundation/components/block-grid", // "foundation/components/breadcrumbs", // "foundation/components/button-groups", // "foundation/components/buttons", // "foundation/components/clearing", // "foundation/components/dropdown", // "foundation/components/dropdown-buttons", // "foundation/components/flex-video", // "foundation/components/forms", // "foundation/components/grid", // "foundation/components/inline-lists", // "foundation/components/joyride", // "foundation/components/keystrokes", // "foundation/components/labels", // "foundation/components/magellan", // "foundation/components/orbit", // "foundation/components/pagination", // "foundation/components/panels", // "foundation/components/pricing-tables", // "foundation/components/progress-bars", // "foundation/components/reveal", // "foundation/components/side-nav", // "foundation/components/split-buttons", // "foundation/components/sub-nav", // "foundation/components/switches", // "foundation/components/tables", // "foundation/components/tabs", // "foundation/components/thumbs", // "foundation/components/tooltips", // "foundation/components/top-bar", // "foundation/components/type", // "foundation/components/offcanvas", // "foundation/components/visibility";
Dom
about 4 years ago
Hi Tim,
You were correct, it does work! Thank - you
Why do you think the spinal parameter fade-in works, but the tutorial does specify non-spinal fadeIn.
Also, hinge is also non spinal but does work.
Any pointer would be a great help :)
Cheers again
Dominique
Hi Dominique,
It looks like you're using the parameter
fadeIn
instead offade-in
.I think if you just change those parameters to spinal-case, it should work.
Let us know if that helped!