Sioux UISegue

Push and modal segue for sioux. demo

Inherits from

• Sioux UI

Create

var UISegue = require('sioux-ui-segue');
var segue = new UISegue('push', document.querySelector('.screen'));
// first argument: type of segue
// second argument: the element segue is performed in

segue.wind();

HTML

push

<div class="screen">
  <div class="ui-window foo" data-segue="active"></div>
  <div class="ui-window bar" data-segue="left"></div>
  <div class="ui-window baz" data-segue="right"></div>
</div>

modal

<div class="screen">
  <div class="ui-window mod" data-segue="modal"></div>
</div>

Properties

• state: UNAVAILABLE if the animation is going on, or AVAILABLE
• DURATION: the duration of the transition
• type: the type of the segue, push or modal

Methods

.wind()

If the segue is push, the current window in the middle will go to the left and the one on the right will go to the middle. If the segue is modal, the modal goes up.

.unwind()

If the segue is push, the current window in the middle will go to the right and the one on the left will go to the middle. If the segue is modal, the modal goes down.

Events

• .on('rightWillAppear', function(rightElement) {})
• .on('leftWillAppear', function(leftElement) {})
• .on('leftPopped', function(leftElement, event) {})
• .on('rightPopped', function(rightElement, event) {})
• .on('rightDidAppear', function(rightElement, event) {})
• .on('leftDidAppear', function(leftElement, event) {})
• .on('modalDidDisappear', function(modalElement, event) {})