app.tag

<app>
<home class="app-page" data-page="true"></home>
<detail class="app-page" data-page="true"></detail>
<cart class="app-page" data-page="true"></cart>
<checkout class="app-page" data-page="true"></checkout>

var path = location.pathname.split('/')
var collections = ['home', 'detail', 'cart', 'checkout']
  , pages = {}, activeClass = 'app-active'
  , currentCollection = path.length > 2 && path[2] ? path[2] : 'home'
  , sliding = 'page-sliding'

this.on('mount', function(){

  riot.route.base('/web/')

  riot.route(function(collection, id, action) {

    if (!pages[collection=collections.indexOf(collection)!=-1 && collection||currentCollection])
      pages[collection] = riot.mount(collection)[0]

    var prev = pages[currentCollection], next = pages[collection], cprev = prev.root.classList, cnext = next.root.classList

    var toggle = function(flag){
      var a = document.querySelectorAll('a'), c='disable'
      for(var i=0;i<a.length;i++) a.item(i).classList[flag?'add':'remove'](c)
    }

    next.trigger('show', arguments)

    cnext.add(activeClass)

    if (currentCollection != collection){
      var animClass =  collections.indexOf(currentCollection) < collections.indexOf(collection) ? 'left' : 'right'
      toggle(true)
      cprev.add(sliding)
      cprev.add(animClass)
      setTimeout(function(){
        toggle()
        cprev.remove(activeClass)
        cprev.remove(sliding)
        cprev.remove(animClass)

        next.trigger('hidden', arguments)

      }, 300)
    }

    currentCollection = collection
  })
  riot.route.start(true)
})
</app>