sioux-ui-segue

Deprecated

Sioux UISegue

Push and modal segue for sioux. demo

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();
<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>
<div class="screen">
  <div class="ui-window mod" data-segue="modal"></div>
</div>
  • 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

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.

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.

  • .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) {})