How to use the liquid-fire.isAnimating function in liquid-fire

To help you get started, we’ve selected a few liquid-fire examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pzuraq / liquid-tether / tests / dummy / app / transitions / fade-direction.js View on Github external
firstStep;

  if (dimension.toLowerCase() === 'x') {
    oldParams.translateX = `${(direction * offset)}px`;
    newParams.translateX = ['0px', `${(direction * offset)}px`];
  } else {
    oldParams.translateY = `${(direction * offset)}px`;
    newParams.translateY = ['0px', `${(direction * offset)}px`];
  }

  if (fadingElement) {
    // We still have some older version that is in the process of
    // fading out, so out first step is waiting for it to finish.
    firstStep = finish(fadingElement, 'fade-out');
  } else {
    if (isAnimating(this.oldElement, 'fade-in')) {
      // if the previous view is partially faded in, scale its
      // fade-out duration appropriately.
      outOpts = { duration: timeSpent(this.oldElement, 'fade-in') };
    }
    stop(this.oldElement);
    firstStep = animate(this.oldElement, oldParams, outOpts, 'fade-out');
  }
  return firstStep.then(() => {
    return animate(this.newElement, newParams, opts, 'fade-in');
  });
}
github pzuraq / liquid-tether / tests / dummy / app / transitions / fade-direction.js View on Github external
function findFadingElement(context) {
  for (var i = 0; i < context.older.length; i++) {
    var entry = context.older[i];
    if (isAnimating(entry.element, 'fade-out')) {
      return entry.element;
    }
  }
  if (isAnimating(context.oldElement, 'fade-out')) {
    return context.oldElement;
  }
}
github pzuraq / liquid-tether / tests / dummy / app / transitions / fade-direction.js View on Github external
function findFadingElement(context) {
  for (var i = 0; i < context.older.length; i++) {
    var entry = context.older[i];
    if (isAnimating(entry.element, 'fade-out')) {
      return entry.element;
    }
  }
  if (isAnimating(context.oldElement, 'fade-out')) {
    return context.oldElement;
  }
}
github runspired / liquid-fire-ios / addon / transitions / move-over-half.js View on Github external
};
    elementToOverlay = this.oldElement;
  }

  var overlay = jQuery('<div class="transition-overlay"></div>');
  elementToOverlay.append(overlay);

  if (dimension.toLowerCase() === 'x') {
    property = 'translateX';
    measure = 'width';
  } else {
    property = 'translateY';
    measure = 'height';
  }

  if (isAnimating(this.oldElement, 'moving-in')) {
    firstStep = finish(this.oldElement, 'moving-in');
  } else {
    stop(this.oldElement);
    firstStep = Promise.resolve();
  }

  return firstStep.then(() =&gt; {
    var bigger = biggestSize(this, measure);

    this.oldElement[0].style.zIndex = direction &gt; 0 ? 5 : 0;
    this.newElement[0].style.zIndex = direction &gt; 0 ? 0 : 5;

    oldParams[property] = (bigger * (direction &gt; 0 ? 1 : -0.5)) + 'px';
    newParams[property] = ["0px", (bigger * (direction &gt; 0 ? -0.5 : 1)) + 'px'];

    return Promise.all([
github pzuraq / liquid-tether / app / transitions / fade-direction.js View on Github external
function findFadingElement(context) {
  for (var i = 0; i &lt; context.older.length; i++) {
    var entry = context.older[i];
    if (isAnimating(entry.element, 'fade-out')) {
      return entry.element;
    }
  }
  if (isAnimating(context.oldElement, 'fade-out')) {
    return context.oldElement;
  }
}
github pzuraq / liquid-tether / app / transitions / fade-direction.js View on Github external
function findFadingElement(context) {
  for (var i = 0; i &lt; context.older.length; i++) {
    var entry = context.older[i];
    if (isAnimating(entry.element, 'fade-out')) {
      return entry.element;
    }
  }
  if (isAnimating(context.oldElement, 'fade-out')) {
    return context.oldElement;
  }
}
github cardstack / ember-toolbars / addon / transition-helpers.js View on Github external
export function waitForPrevious(context, name) {
  if (isAnimating(context.oldElement, name)) {
    return finish(context.oldElement, name);
  } else {
    stop(context.oldElement);
    return Promise.resolve();
  }
}
github html-next / vertical-collection / addon / transitions / move-over-half.js View on Github external
opacity: [darkOpacity, 0]
    };
  }

  var overlay = jQuery('<div class="transition-overlay"></div>');
  this.oldElement.append(overlay);

  if (dimension.toLowerCase() === 'x') {
    property = 'translateX';
    measure = 'width';
  } else {
    property = 'translateY';
    measure = 'height';
  }

  if (isAnimating(this.oldElement, 'moving-in')) {
    firstStep = finish(this.oldElement, 'moving-in');
  } else {
    stop(this.oldElement);
    firstStep = Promise.resolve();
  }

  return firstStep.then(() =&gt; {
    var bigger = biggestSize(this, measure);

    this.oldElement[0].style.zIndex = direction &gt; 0 ? 5 : 0;
    this.newElement[0].style.zIndex = direction &gt; 0 ? 0 : 5;

    oldParams[property] = (bigger * (direction &gt; 0 ? 1 : -0.5)) + 'px';
    newParams[property] = ["0px", (bigger * (direction &gt; 0 ? -0.5 : 1)) + 'px'];

    return Promise.all([