transition on first load of state, no previous state

[Karnith]

I tried the setting

gsapifyRouterProvider.initialTransitionEnabled = true

but it does absolutely nothing... I'm trying to get state animations on fist page load of the site. I'm using an abstract state as a template for the initial app index file, don't know if the structure is needed, but it is the following:

app
|__template state (abstract) views : {@header. @content, @footer}
      |__header state {@header}
      |__home state {@content}
      |__about us state {@content}
      |__etc

Angular 1.4.7 ui-router 0.2.15 angular-gsapify-router 0.0.27

[homerjam]

Seems like that option was for older versions of angular.

I've added some code which will trigger the initial state transition for you, please can you test this.

[Karnith]

Sure, let me update and I'll test. Has the update been pushed to bower or do I need to grab from master or a fork?

[homerjam]

It's been pushed to bower as a new version, I also added the plugin to npm

[Karnith]

I still can't get it to work...

If it's any help, I'm not using ui-router in the traditional sense. I don't have a static routes file, but rather a dynamic routing setup. Each of my pages has it's own js file that specifies state details. I use an abstract state as a placement template for the different sections of the site (as of right now header, content and footer sections) that populates several named ui-views. I've added the data section to the home state.

class Config extends Config('JCMarSite')
  constructor: ($stateProvider, $urlRouterProvider, gsapifyRouterProvider)->
    $stateProvider.state 'frontPage.home',
      url: '/'
      views:
        content:
          controller: 'HomeCtrl'
          controllerAs: 'homeVm'
          templateProvider: ($templateCache) ->
            return $templateCache.get 'app/public/home/index.tpl.html'
      ncyBreadcrumb:
        label: 'Home'
      data:
        'gsapifyRouter.content':
          enter:
            'in':
              transition: 'slideLeft',
            out:
              transition: 'slideRight',

and in my config for the abstract state I specify the defaults and behavior of transitions

class config extends Config('JCMarSite')
  constructor: ($stateProvider, gsapifyRouterProvider, $breadcrumbProvider) ->
    $breadcrumbProvider.setOptions(
      prefixStateName: 'frontPage.home'
      includeAbstract: false
    )
    # Set default transition to use if unspecified
    gsapifyRouterProvider.defaults =
      enter: 'slideLeft'
      leave: 'slideRight'
    # optionally enable transition on initial load
    # otherwise defaults to false
    gsapifyRouterProvider.initialTransitionEnabled = true
    # add new transition
    gsapifyRouterProvider.transition(
      'slideRight',
      {
        # transition duration
        duration: 1.2
        ease: 'Quint.easeInOut'
        # start/end point for transition (eg. off screen)
        delay: 0.12
        css:
          x: '100%'
          opacity: 0
      }
    )
    gsapifyRouterProvider.transition(
      'slideLeft',
      {
        # transition duration
        duration: 1.2
        ease: 'Quint.easeInOut'
        # start/end point for transition (eg. off screen)
        delay: 0.12
        css:
          x: '100%'
          opacity: 0
      }
    )
    gsapifyRouterProvider.transition(
      'fadeOut',
      {
        # transition duration
        duration: 0.5
        # start/end point for transition (eg. off screen)
        css:
          opacity: 0
      }
    )

The transitions work as expected, with the exception being on initial load of home page.

I use coffeescript and ngclassify to ensure a repetitive design pattern for javascript. What I'm building is a full blown CMS system, hence the design decisions I've made for the application structure.

[homerjam]

Is there any way to post a "working" example with the coffeescript compiled?

This looks right to me but I wonder if it has something to do with the abstract states.

The way the initial state transition works is by switching to a blank state and back effectively force triggering the transitions.

Can I also ask what you're trying to do design wise in case I can suggest an alternative?

[homerjam]

Is this a new CMS project? Were you tempted by ES6/typescript for an easier switch to angular 2, or does coffeescript allow for an easy transition already?

[Karnith]

Yes, It's a new CMS project. The goal is to be the rival / competitor to Microsoft's SharePoint. There will be a free version for home use (think new age family organization. As technology evolves, families will be more and more engaged with technology, so the free CMS will hopefully be the replacement to sticky notes on the fridge, personalize blogging and be able to network / communicate with other family/friends that have the CMS installed for unified communication of of personal networks).

I haven't gotten into ES6, but plan to. I never really liked typescript so coffeescript was really the only other answer I could come up with. I know that angular 2 has typescript transpiler so i'll eventually need to work with it (unless they include coffeescript transpiler also)

I'll create a working example, but it will take a while. I'll post the plunker once it's finished.

[homerjam]

fixed by 9357d0afeabcf0555fc05d873f760cc227679e9f