unpoly-rails 0.55.1 → 0.56.0

data/lib/assets/javascripts/unpoly/link.coffee.erb

@@ -283,10 +283,16 @@ up.link = (($) ->
       $link.attr('up-follow', '')
 
   shouldProcessEvent = (event, $link) ->
-    $target = $(event.target)
-    $targetedChildLink = $target.closest('a, [up-href]').not($link)
-    $targetedInput = up.form.fieldSelector().seekUp($target)
-    $targetedChildLink.length == 0 && $targetedInput.length == 0 && u.isUnmodifiedMouseEvent(event)
+    target = event.target
+    # We never handle events for the right mouse button, or when Shift/CTRL/Meta is pressed
+    return false unless u.isUnmodifiedMouseEvent(event)
+    # If we actually targeted $link, save ourselves the expensive DOM traversal below
+    return true if target == $link.get(0)
+    # If user clicked on a child link of $link, or in an <input> within an [up-expand][up-href]
+    # we want those other elements handle the click.
+    $betterTarget = $(target).closest("a, [up-href], #{up.form.fieldSelector()}").not($link)
+    return false if $betterTarget.length
+    return true
 
   ###**
   Returns whether the given link has a [safe](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.1.1)

data/lib/assets/javascripts/unpoly/modal.coffee.erb

@@ -245,10 +245,11 @@ up.modal = (($) ->
     $modal = $(templateHtml())
     $modal.attr('up-flavor', state.flavor)
     $modal.attr('up-position', state.position) if u.isPresent(state.position)
+
     $dialog = $modal.find('.up-modal-dialog')
-    $dialog.css('width', options.width) if u.isPresent(options.width)
-    $dialog.css('max-width', options.maxWidth) if u.isPresent(options.maxWidth)
-    $dialog.css('height', options.height) if u.isPresent(options.height)
+    dialogStyles = u.only(options, 'width', 'maxWidth', 'height')
+    u.writeInlineStyle($dialog, dialogStyles)
+
     $modal.find('.up-modal-close').remove() unless state.closable
     $content = $modal.find('.up-modal-content')
     # Create an empty element that will match the
@@ -272,18 +273,18 @@ up.modal = (($) ->
     if u.documentHasVerticalScrollbar()
       $body = $('body')
       scrollbarWidth = u.scrollbarWidth()
-      bodyRightPadding = parseFloat($body.css('padding-right'))
+      bodyRightPadding = u.readComputedStyleNumber($body, 'paddingRight')
       bodyRightShift = scrollbarWidth + bodyRightPadding
-      unshiftBody = u.temporaryCss($body,
-        'padding-right': "#{bodyRightShift}px",
-        'overflow-y': 'hidden'
+      unshiftBody = u.writeTemporaryStyle($body,
+        paddingRight: bodyRightShift
+        overflowY: 'hidden'
       )
       state.unshifters.push(unshiftBody)
       up.layout.anchoredRight().each ->
         $element = $(this)
-        elementRight = parseFloat($element.css('right'))
+        elementRight = u.readComputedStyleNumber($element, 'right')
         elementRightShift = scrollbarWidth + elementRight
-        unshifter = u.temporaryCss($element, 'right': elementRightShift)
+        unshifter = u.writeTemporaryStyle($element, right: elementRightShift)
         state.unshifters.push(unshifter)
 
 
@@ -456,6 +457,7 @@ up.modal = (($) ->
     options.layer = 'modal'
     options.failTarget = u.option(options.failTarget, $link.attr('up-fail-target'))
     options.failLayer = u.option(options.failLayer, $link.attr('up-fail-layer'), 'auto')
+
     animateOptions = up.motion.animateOptions(options, $link, duration: flavorDefault('openDuration', options.flavor), easing: flavorDefault('openEasing', options.flavor))
 
     # Although we usually fall back to full page loads if a browser doesn't support pushState,

data/lib/assets/javascripts/unpoly/{motion.coffee → motion.coffee.erb}

@@ -72,7 +72,7 @@ up.motion = (($) ->
     enabled: true
 
   reset = ->
-    finish()
+    motionTracker.reset()
     namedAnimations = u.copy(defaultNamedAnimations)
     namedTransitions = u.copy(defaultNamedTransitions)
     config.reset()
@@ -165,41 +165,41 @@ up.motion = (($) ->
     $element = $(elementOrSelector)
     options = animateOptions(options)
 
-    finishOnce($element, options).then ->
-      if !willAnimate($element, animation, options)
-        skipAnimate($element, animation)
-      else if u.isFunction(animation)
-        animation($element, options)
-      else if u.isString(animation)
-        animate($element, findNamedAnimation(animation), options)
-      else if u.isOptions(animation)
-        animateWithCss($element, animation, options)
-      else
-        # Error will be converted to rejected promise in a then() callback
-        up.fail('Animation must be a function, animation name or object of CSS properties, but it was %o', animation)
+    animationFn = findAnimationFn(animation)
+    willRun = willAnimate($element, animation, options)
+
+    if willRun
+      runNow = -> animationFn($element, options)
+      motionTracker.claim($element, runNow, options)
+    else
+      skipAnimate($element, animation)
 
   willAnimate = ($elements, animationOrTransition, options) ->
     options = animateOptions(options)
-    isEnabled() && !isNone(animationOrTransition) && options.duration > 0 && u.all($elements, u.isBodyDescendant)
+    isEnabled() && !isNone(animationOrTransition) && options.duration > 0 && !isSingletonElement($elements)
+
+  isSingletonElement = ($element) ->
+    # jQuery's is() returns true if at least one element in the collection matches the selector
+    $element.is('body')
 
   skipAnimate = ($element, animation) ->
     if u.isOptions(animation)
       # If we are given the final animation frame as an object of CSS properties,
       # the best we can do is to set the final frame without animation.
-      $element.css(animation)
+      u.writeInlineStyle($element, animation)
     # Signal that the animation is already done.
     Promise.resolve()
 
+  animCount = 0
+
   ###**
   Animates the given element's CSS properties using CSS transitions.
 
-  If the element is already being animated, the previous animation
-  will instantly jump to its last frame before the new animation begins.
+  Does not track the animation, nor does it finishes existing animations
+  (use `up.motion.animate()` for that). It does, however, listen to the motionTracker's
+  finish event.
 
-  To improve performance, the element will be forced into compositing for
-  the duration of the animation.
-
-  @function up.util.cssAnimate
+  @function animateNow
   @param {Element|jQuery|string} elementOrSelector
     The element to animate.
   @param {Object} lastFrame
@@ -216,84 +216,10 @@ up.motion = (($) ->
     A promise that fulfills when the animation ends.
   @internal
   ###
-  animateWithCss = ($element, lastFrame, options) ->
-    startCssTransition = ->
-      transitionProperties = Object.keys(lastFrame)
-      transition =
-        'transition-property': transitionProperties.join(', ')
-        'transition-duration': "#{options.duration}ms"
-        'transition-delay': "#{options.delay}ms"
-        'transition-timing-function': options.easing
-      oldTransition = $element.css(Object.keys(transition))
-  
-      deferred = u.newDeferred()
-      # May not call this finish() since this would override the global finish()
-      # function in this scope. We really need `let`, which CoffeeScript will never get.
-      fulfill = -> deferred.resolve()
-  
-      onTransitionEnd = (event) ->
-        # Check if the transitionend event was caused by our own transition,
-        # and not by some other transition that happens to live on the same element.
-        completedProperty = event.originalEvent.propertyName
-        fulfill() if u.contains(transitionProperties, completedProperty)
-  
-      # Animating code is expected to listen to this event to enable external code
-      # to fulfil the animation.
-      onFinish = fulfill
-
-      $element.on(motionTracker.finishEvent, onFinish)
-  
-      # Ideally, we want to fulfil when we receive the `transitionend` event
-      $element.on('transitionend', onTransitionEnd)
-  
-      # The `transitionend` event might not fire reliably if other transitions
-      # are interfering on the same element. This is why we register a fallback
-      # timeout that forces the animation to fulfil a few ms later.
-      transitionTimingTolerance = 5
-      cancelFallbackTimer = u.setTimer(options.duration + transitionTimingTolerance, fulfill)
-
-      # All clean-up is handled in the following then() handler.
-      # This way it will be run both when the animation finishAnimatees naturally and
-      # when it is finishAnimateed externally.
-      deferred.then ->
-        # Disable all three triggers that would fulfil the motion:
-        $element.off(motionTracker.finishEvent, onFinish)
-        $element.off('transitionend', onTransitionEnd)
-        clearTimeout(cancelFallbackTimer)
-
-        # Elements with compositing might look blurry, so undo that.
-        undoCompositing()
-  
-        # To interrupt the running transition we *must* set it to 'none' exactly.
-        # We cannot simply restore the old transition properties because browsers
-        # would simply keep transitioning.
-        $element.css('transition': 'none')
-  
-        # Restoring a previous transition involves forcing a repaint, so we only do it if
-        # we know the element was transitioning before.
-        # Note that the default transition for elements is actually "all 0s ease 0s"
-        # instead of "none", although that has the same effect as "none".
-        hadTransitionBefore = !(oldTransition['transition-property'] == 'none' || (oldTransition['transition-property'] == 'all' && oldTransition['transition-duration'][0] == '0'))
-        if hadTransitionBefore
-          # If there is no repaint between the "none" transition and restoring the previous
-          # transition, the browser will simply keep transitioning. I'm sorry.
-          u.forceRepaint($element)
-          $element.css(oldTransition)
-
-      # Push the element into its own compositing layer before we are going
-      # to massively change the element against background.
-      undoCompositing = u.forceCompositing($element)
-  
-      # CSS will start animating when we set the `transition-*` properties and then change
-      # the animating properties to the last frame.
-      $element.css(transition)
-      $element.css(lastFrame)
-  
-      # Return a promise that fulfills when either the animation ends
-      # or someone finishes the animation.
-      deferred.promise()
-
-    motionTracker.start($element, startCssTransition)
+  animateNow = ($element, lastFrame, options) ->
+    options = u.merge(options, finishEvent: motionTracker.finishEvent)
+    cssTransition = new up.CssTransition($element, lastFrame, options)
+    return cssTransition.start()
 
   ###**
   Extracts animation-related options from the given options hash.
@@ -311,76 +237,12 @@ up.motion = (($) ->
     consolidatedOptions.easing = u.option(userOptions.easing, u.presentAttr($element, 'up-easing'), moduleDefaults.easing, config.easing)
     consolidatedOptions.duration = Number(u.option(userOptions.duration, u.presentAttr($element, 'up-duration'), moduleDefaults.duration, config.duration))
     consolidatedOptions.delay = Number(u.option(userOptions.delay, u.presentAttr($element, 'up-delay'), moduleDefaults.delay, config.delay))
-    consolidatedOptions.finishedMotion = userOptions.finishedMotion # this is required by animate() and finishOnceBeforeMotion()
+    consolidatedOptions.trackMotion = userOptions.trackMotion # required by up.MotionTracker
     consolidatedOptions
       
   findNamedAnimation = (name) ->
     namedAnimations[name] or up.fail("Unknown animation %o", name)
 
-  ###**
-  @function withGhosts
-  @return {Promise}
-  @internal
-  ###
-  withGhosts = ($old, $new, options, transitionFn) ->
-    # Don't create ghosts of ghosts in case a transition function calling `morph` recursively.
-    if options.copy == false || $old.is('.up-ghost') || $new.is('.up-ghost')
-      return transitionFn($old, $new, options)
-
-    oldCopy = undefined
-    newCopy = undefined
-    oldScrollTop = undefined
-    newScrollTop = undefined
-
-    $viewport = up.layout.viewportOf($old)
-
-    # Right now $old and $new are visible siblings in the DOM.
-    # Temporarily hide $new while we copy $old and take some measurements.
-    u.temporaryCss $new, display: 'none', ->
-      oldCopy = prependCopy($old, $viewport)
-      # Remember the previous scroll position in case we will reveal $new below.
-      oldScrollTop = $viewport.scrollTop()
-
-    # Hide $old. We will never re-show it.
-    # It's not our job to remove $old from the DOM.
-    $old.hide()
-
-    # Don't animate the scrolling.
-    # We just want to scroll $new into position before we start the enter animation.
-    scrollOptions = u.merge(options, { duration: 0})
-    up.layout.revealOrRestoreScroll($new, scrollOptions).then ->
-      newCopy = prependCopy($new, $viewport)
-      newScrollTop = $viewport.scrollTop()
-
-      # Since we have scrolled the viewport (containing both $old and $new),
-      # we must shift the old copy so it looks like it it is still sitting
-      # in the same position.
-      oldCopy.moveTop(newScrollTop - oldScrollTop)
-
-      # We will let $new take up space in the element flow, but hide it.
-      # The user will only see the two animated ghosts until the transition
-      # is over.
-      # Note that we must **not** use `visibility: hidden` to hide the new
-      # element. This would delay browser painting until the element is
-      # shown again, causing a flicker while the browser is painting.
-      restoreNewOpacity = u.temporaryCss($new, opacity: '0')
-
-      # Perform the transition on the ghosts.
-      transitionDone = transitionFn(oldCopy.$ghost, newCopy.$ghost, options)
-
-      # The animations on both ghosts should finish if someone calls finish()
-      # on either of the original elements.
-      $bothGhosts = oldCopy.$ghost.add(newCopy.$ghost)
-      $bothOriginals = $old.add($new)
-      motionTracker.forwardFinishEvent($bothOriginals, $bothGhosts, transitionDone)
-
-      transitionDone.then ->
-        # This will be called when the transition in the block is either done
-        # or when it is finished by triggering up:motion:finish on either element.
-        restoreNewOpacity()
-        oldCopy.$bounds.remove()
-        newCopy.$bounds.remove()
-
   ###**
   Completes [animations](/up.animate) and [transitions](/up.morph).
 
@@ -402,12 +264,16 @@ up.motion = (($) ->
     motionTracker.finish(elementOrSelector)
 
   ###**
-  Performs an animated transition between two elements.
+  Performs an animated transition between the `source` and `target` elements.
+
   Transitions are implement by performing two animations in parallel,
-  causing one element to disappear and the other to appear.
+  causing `source` to disappear and the `target` to appear.
 
-  Note that the transition does not remove any elements from the DOM.
-  The first element will remain in the DOM, albeit hidden using `display: none`.
+  - `target` is [inserted before](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) `source`
+  - `source` is removed from the [document flow](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning) with `position: absolute`.
+     It will be positioned over its original place in the flow that is now occupied by `target`.
+  - Both `source` and `target` are animated in parallel
+  - `source` is removed from the DOM
 
   \#\#\# Named transitions
 
@@ -463,7 +329,7 @@ up.motion = (($) ->
     Whether to reveal the new element by scrolling its parent viewport.
   @return {Promise}
     A promise that fulfills when the transition ends.
-  @stable
+  @experimental
   ###  
   morph = (source, target, transitionObject, options) ->
     options = u.options(options)
@@ -474,26 +340,66 @@ up.motion = (($) ->
     $both = $old.add($new)
 
     transitionFn = findTransitionFn(transitionObject)
-    willMorph = willAnimate($both, transitionFn, options)
-
-    up.log.group ('Morphing %o to %o with transition %o' if willMorph), $old.get(0), $new.get(0), transitionObject, ->
-      finishOnce($both, options).then ->
-        if !willMorph
-          skipMorph($old, $new, options)
-        else if transitionFn
-          withGhosts($old, $new, options, transitionFn)
-        else
-          # Exception will be converted to rejected Promise inside a then() handler
-          up.fail("Unknown transition %o", transitionObject)
-
-  finishOnce = ($elements, options) ->
-    # Finish existing transitions, but only once in case morph() or animate() is called recursively.
-    if options.finishedMotion
-      Promise.resolve()
+    willMorph = willAnimate($old, transitionFn, options)
+
+    options.afterInsert ||= u.noop
+    options.beforeDetach ||= u.noop
+    options.afterDetach ||= u.noop
+
+    scrollNew = ->
+      # Don't animate the scrolling. The { duration } option was meant for the transition.
+      scrollOptions = u.merge(options, duration: 0)
+      # Scroll $new into position before we start the enter animation.
+      up.layout.revealOrRestoreScroll($new, scrollOptions)
+
+    if willMorph
+      if motionTracker.isActive($old) && options.trackMotion is false
+        return transitionFn($old, $new, options)
+
+      up.puts 'Morphing %o to %o with transition %o', $old.get(0), $new.get(0), transitionObject
+
+      $viewport = up.layout.viewportOf($old)
+      scrollTopBeforeReveal = $viewport.scrollTop()
+
+      oldRemote = up.layout.absolutize $old,
+        # Because the insertion will shift elements visually, we must delay insertion
+        # until absolutize() has measured the bounding box of the old element.
+        afterMeasure: ->
+          $new.insertBefore($old)
+          options.afterInsert()
+
+      trackable = ->
+        # Scroll $new into position before we start the enter animation.
+        promise = scrollNew()
+
+        promise = promise.then ->
+          # Since we have scrolled the viewport (containing both $old and $new),
+          # we must shift the old copy so it looks like it it is still sitting
+          # in the same position.
+          scrollTopAfterReveal = $viewport.scrollTop()
+          oldRemote.moveTop(scrollTopAfterReveal - scrollTopBeforeReveal)
+
+          transitionFn($old, $new, options)
+
+        promise = promise.then ->
+          options.beforeDetach()
+          $old.detach()
+          oldRemote.$bounds.remove()
+          options.afterDetach()
+
+        return promise
+
+      motionTracker.claim($both, trackable, options)
+
     else
-      # Use options to persist that we have finished motion.
-      options.finishedMotion = true
-      finish($elements)
+      options.beforeDetach()
+      # Swapping the elements directly with replaceWith() will cause
+      # jQuery to remove all data attributes, which we use to store destructors
+      swapElementsDirectly($old, $new)
+      options.afterInsert()
+      options.afterDetach()
+      promise = scrollNew()
+      return promise
 
   findTransitionFn = (object) ->
     if isNone(object)
@@ -501,90 +407,45 @@ up.motion = (($) ->
     else if u.isFunction(object)
       object
     else if u.isArray(object)
-      if isNone(object[0]) && isNone(object[1])
-        # A composition of two "none" animations is again a "none" animation
-        undefined
-      else
-        ($old, $new, options) -> Promise.all([
-          animate($old, object[0], options),
-          animate($new, object[1], options)
-        ])
+      composeTransitionFn(object...)
     else if u.isString(object)
       if object.indexOf('/') >= 0 # Compose a transition from two animation names
-        findTransitionFn(object.split('/'))
+        composeTransitionFn(object.split('/')...)
       else if namedTransition = namedTransitions[object]
         findTransitionFn(namedTransition)
+    else
+      up.fail("Unknown transition %o", object)
 
-  ###**
-  This instantly causes the side effects of a successful transition.
-  We use this to skip morphing for old browsers, or when the developer
-  decides to only animate the new element (i.e. no real ghosting or transition).
-
-  @return {Promise}
-  @internal
-  ###
-  skipMorph = ($old, $new, options) ->
-    # Simply hide the old element, which would be the side effect of withGhosts(...) below.
-    $old.hide()
-
-    # Don't animate the scrolling.
-    # We just want to scroll $new into position before we start the enter animation.
-    scrollOptions = u.merge(options, { duration: 0})
+  composeTransitionFn = (oldAnimation, newAnimation) ->
+    if isNone(oldAnimation) && isNone(oldAnimation)
+      # A composition of two null-animations is a null-transform
+      # and should be skipped.
+      undefined
+    else
+      oldAnimationFn = findAnimationFn(oldAnimation) || u.asyncNoop
+      newAnimationFn = findAnimationFn(newAnimation) || u.asyncNoop
+      ($old, $new, options) ->
+        Promise.all([
+          oldAnimationFn($old, options),
+          newAnimationFn($new, options)
+        ])
 
-    # Since we cannot rely on withGhosts to control the scroll position
-    # in this branch, we need to do it ourselves.
-    up.layout.revealOrRestoreScroll($new, scrollOptions)
+  findAnimationFn = (object) ->
+    if isNone(object)
+      undefined
+    else if u.isFunction(object)
+      object
+    else if u.isString(object)
+      findNamedAnimation(object)
+    else if u.isOptions(object)
+      ($element, options) -> animateNow($element, object, options)
+    else
+      up.fail('Unknown animation %o', object)
 
-  ###**
-  @internal
-  ###
-  prependCopy = ($element, $viewport) ->
-    elementDims = u.measure($element, relative: true, inner: true)
-
-    $ghost = $element.clone()
-    $ghost.find('script').remove()
-    $ghost.css
-      # If the element had a layout context before, make sure the
-      # ghost will have layout context as well (and vice versa).
-      position: if $element.css('position') == 'static' then 'static' else 'relative'
-      top:    'auto'
-      right:  'auto'
-      bottom: 'auto'
-      left:   'auto'
-      width:  '100%'
-      height: '100%'
-    $ghost.addClass('up-ghost')
-
-    # Wrap the ghost in another container so its margin can expand
-    # freely. If we would position the element directly (old implementation),
-    # it would gain a layout context which cannot be crossed by margins.
-    $bounds = $('<div class="up-bounds"></div>')
-    $bounds.css(position: 'absolute')
-    $bounds.css(elementDims)
-
-    top = elementDims.top
-
-    moveTop = (diff) ->
-      if diff != 0
-        top += diff
-        $bounds.css(top: top)
-
-    $ghost.appendTo($bounds)
-    $bounds.insertBefore($element)
-
-    # In theory, $ghost should now sit over $element perfectly.
-    # However, $element might collapse its margin against a previous sibling
-    # element, and $ghost does not have the same sibling.
-    # So we manually correct $ghost's top position so it aligns with $element.
-    moveTop($element.offset().top - $ghost.offset().top)
-
-    $fixedElements = up.layout.fixedChildren($ghost)
-    for fixedElement in $fixedElements
-      u.fixedToAbsolute(fixedElement, $viewport)
-
-    $ghost: $ghost
-    $bounds: $bounds
-    moveTop: moveTop
+  swapElementsDirectly = ($old, $new) ->
+    # jQuery will actually let us .insertBefore the new <body> tag,
+    # but that's probably bad Karma.
+     $old.replaceWith($new)
 
   ###**
   Defines a named transition.
@@ -620,7 +481,7 @@ up.motion = (($) ->
   @stable
   ###
   registerTransition = (name, transition) ->
-    namedTransitions[name] = transition
+    namedTransitions[name] = findTransitionFn(transition)
 
   ###**
   Defines a named animation.
@@ -629,7 +490,7 @@ up.motion = (($) ->
 
       up.animation('fade-in', function($element, options) {
         $element.css(opacity: 0);
-        up.animate($ghost, { opacity: 1 }, options);
+        up.animate($element, { opacity: 1 }, options);
       })
 
   It is recommended that your definitions always end by calling
@@ -655,7 +516,7 @@ up.motion = (($) ->
   @stable
   ###
   registerAnimation = (name, animation) ->
-    namedAnimations[name] = animation
+    namedAnimations[name] = findAnimationFn(animation)
 
   snapshot = ->
     defaultNamedAnimations = u.copy(namedAnimations)
@@ -669,112 +530,113 @@ up.motion = (($) ->
   @internal
   ###
   isNone = (animationOrTransition) ->
-    # false, undefined, null and the string "none" are all ways to skip animations
-    !animationOrTransition || animationOrTransition == 'none' || (u.isOptions(animationOrTransition) && u.isBlank(animationOrTransition))
+    # false, undefined, '', null and the string "none" are all ways to skip animations
+    !animationOrTransition || animationOrTransition == 'none' || u.isBlank(animationOrTransition)
 
-  registerAnimation('fade-in', ($ghost, options) ->
-    $ghost.css(opacity: 0)
-    animate($ghost, { opacity: 1 }, options)
+  registerAnimation('fade-in', ($element, options) ->
+    u.writeInlineStyle($element, opacity: 0)
+    animateNow($element, { opacity: 1 }, options)
   )
 
-  registerAnimation('fade-out', ($ghost, options) ->
-    $ghost.css(opacity: 1)
-    animate($ghost, { opacity: 0 }, options)
+  registerAnimation('fade-out', ($element, options) ->
+    u.writeInlineStyle($element, opacity: 1)
+    animateNow($element, { opacity: 0 }, options)
   )
 
   translateCss = (x, y) ->
     { transform: "translate(#{x}px, #{y}px)" }
 
-  registerAnimation('move-to-top', ($ghost, options) ->
-    $ghost.css(translateCss(0, 0))
-    box = u.measure($ghost)
+  registerAnimation('move-to-top', ($element, options) ->
+    u.writeInlineStyle($element, translateCss(0, 0))
+    box = u.measure($element)
     travelDistance = box.top + box.height
-    animate($ghost, translateCss(0, -travelDistance), options)
+    animateNow($element, translateCss(0, -travelDistance), options)
   )
 
-  registerAnimation('move-from-top', ($ghost, options) ->
-    $ghost.css(translateCss(0, 0))
-    box = u.measure($ghost)
+  registerAnimation('move-from-top', ($element, options) ->
+    u.writeInlineStyle($element, translateCss(0, 0))
+    box = u.measure($element)
     travelDistance = box.top + box.height
-    $ghost.css(translateCss(0, -travelDistance))
-    animate($ghost, translateCss(0, 0), options)
+    u.writeInlineStyle($element, translateCss(0, -travelDistance))
+    animateNow($element, translateCss(0, 0), options)
   )
 
-  registerAnimation('move-to-bottom', ($ghost, options) ->
-    $ghost.css(translateCss(0, 0))
-    box = u.measure($ghost)
+  registerAnimation('move-to-bottom', ($element, options) ->
+    u.writeInlineStyle($element, translateCss(0, 0))
+    box = u.measure($element)
     travelDistance = u.clientSize().height - box.top
-    animate($ghost, translateCss(0, travelDistance), options)
+    animateNow($element, translateCss(0, travelDistance), options)
   )
 
-  registerAnimation('move-from-bottom', ($ghost, options) ->
-    $ghost.css(translateCss(0, 0))
-    box = u.measure($ghost)
+  registerAnimation('move-from-bottom', ($element, options) ->
+    u.writeInlineStyle($element, translateCss(0, 0))
+    box = u.measure($element)
     travelDistance = u.clientSize().height - box.top
-    $ghost.css(translateCss(0, travelDistance))
-    animate($ghost, translateCss(0, 0), options)
+    u.writeInlineStyle($element, translateCss(0, travelDistance))
+    animateNow($element, translateCss(0, 0), options)
   )
 
-  registerAnimation('move-to-left', ($ghost, options) ->
-    $ghost.css(translateCss(0, 0))
-    box = u.measure($ghost)
+  registerAnimation('move-to-left', ($element, options) ->
+    u.writeInlineStyle($element, translateCss(0, 0))
+    box = u.measure($element)
     travelDistance = box.left + box.width
-    animate($ghost, translateCss(-travelDistance, 0), options)
+    animateNow($element, translateCss(-travelDistance, 0), options)
   )
 
-  registerAnimation('move-from-left', ($ghost, options) ->
-    $ghost.css(translateCss(0, 0))
-    box = u.measure($ghost)
+  registerAnimation('move-from-left', ($element, options) ->
+    u.writeInlineStyle($element, translateCss(0, 0))
+    box = u.measure($element)
     travelDistance = box.left + box.width
-    $ghost.css(translateCss(-travelDistance, 0))
-    animate($ghost, translateCss(0, 0), options)
+    u.writeInlineStyle($element, translateCss(-travelDistance, 0))
+    animateNow($element, translateCss(0, 0), options)
   )
 
-  registerAnimation('move-to-right', ($ghost, options) ->
-    $ghost.css(translateCss(0, 0))
-    box = u.measure($ghost)
+  registerAnimation('move-to-right', ($element, options) ->
+    u.writeInlineStyle($element, translateCss(0, 0))
+    box = u.measure($element)
     travelDistance = u.clientSize().width - box.left
-    animate($ghost, translateCss(travelDistance, 0), options)
+    animateNow($element, translateCss(travelDistance, 0), options)
   )
 
-  registerAnimation('move-from-right', ($ghost, options) ->
-    $ghost.css(translateCss(0, 0))
-    box = u.measure($ghost)
+  registerAnimation('move-from-right', ($element, options) ->
+    u.writeInlineStyle($element, translateCss(0, 0))
+    box = u.measure($element)
     travelDistance = u.clientSize().width - box.left
-    $ghost.css(translateCss(travelDistance, 0))
-    animate($ghost, translateCss(0, 0), options)
+    u.writeInlineStyle($element, translateCss(travelDistance, 0))
+    animateNow($element, translateCss(0, 0), options)
   )
 
-  registerAnimation('roll-down', ($ghost, options) ->
-    fullHeight = $ghost.height()
-    styleMemo = u.temporaryCss($ghost,
+  registerAnimation('roll-down', ($element, options) ->
+    fullHeight = $element.height()
+    styleMemo = u.writeTemporaryStyle($element,
       height: '0px'
       overflow: 'hidden'
     )
-    deferred = animate($ghost, { height: "#{fullHeight}px" }, options)
+    deferred = animate($element, { height: "#{fullHeight}px" }, options)
     deferred.then(styleMemo)
     deferred
   )
 
-  registerTransition('move-left', 'move-to-left/move-from-right')
-  registerTransition('move-right', 'move-to-right/move-from-left')
-  registerTransition('move-up', 'move-to-top/move-from-bottom')
-  registerTransition('move-down', 'move-to-bottom/move-from-top')
-  registerTransition('cross-fade', 'fade-out/fade-in')
+  registerTransition('move-left', ['move-to-left', 'move-from-right'])
+  registerTransition('move-right', ['move-to-right', 'move-from-left'])
+  registerTransition('move-up', ['move-to-top', 'move-from-bottom'])
+  registerTransition('move-down', ['move-to-bottom', 'move-from-top'])
+  registerTransition('cross-fade', ['fade-out', 'fade-in'])
 
   up.on 'up:framework:booted', snapshot
   up.on 'up:framework:reset', reset
     
+  <% if ENV['JS_KNIFE'] %>knife: eval(Knife.point)<% end %>
   morph: morph
   animate: animate
   animateOptions: animateOptions
   willAnimate: willAnimate
   finish: finish
+  finishCount: -> motionTracker.finishCount
   transition: registerTransition
   animation: registerAnimation
   config: config
   isEnabled: isEnabled
-  prependCopy: prependCopy
   isNone: isNone
 
 )(jQuery)