homerjam / angular-gsapify-router Goto Github PK

We have been trying to figure out why half of some of our pages is missing and have discovered that adding the transitions to the routes.js file is what is causing it. The issue can be observed on our staging sever. In order to reproduce the error, visit this page (without any type of cache killing on) and refresh. Scroll down and you'll see that the content below the photo of Bill Clinton goes missing.

http://stage.nationalmachine.co/case-study/severs-fall-festival

In order to bring it back, scroll all the way to the bottom or resize the window and it will return. Any idea what might be causing that?

Hi there,

The logic that checks whether the inputted in/out transition objects is an array/function/object has changed. Previously, you had:
dataOptsType === '[object Object]'
which would only match if the dataOpts object was truly an object. But now with this code:
angular.isObject(dataOpts)
the function runs for situations where dataOpts is an object or an array because an Array is an object with this check. This is causing the following error to occur in our production app:
Error: [$injector:strictdi] function($state) is not using explicit annotation and cannot be invoked in strict mode https://errors.angularjs.org/1.7.8/$injector/strictdi?p0=function(%24state) at angular.js:138 at Function.annotate [as $$annotate] (angular.js:4303) at injectionArgs (angular.js:5100) at Object.invoke (angular.js:5133) at angular-gsapify-router.js:130 at Array.forEach (<anonymous>) at getOpts (angular-gsapify-router.js:125) at Object.enter (angular-gsapify-router.js:195) at Function.enter (angular-gsapify-router.js:517) at executeAnimationFn (angular-animate.js:1937)

because the isArray check is fine, but the isObject check also matches and then tries to run each array element on its own, which means the second part of our array being just a function gets flagged because of the strictDI requirement.

When using:

gsapifyRouterProvider.initialTransitionEnabled = true;

The forced transition back to the original state seems to be missing the original params

Hello, thank you for work.
I found that this plugin doesn't work in Internet explorer.
If you have any ideas why it not working, please tell me.

In angular material it does'nt work if you have flex or layouts int he ui-view

I get Error: undefined is not an object (evaluating 'state.data') on line 105 (angular-gsapify-router.js) when I used bower to install. I run it in cordova and had already installed ngAnimation and ui-router (if that makes any difference?).

I can get the demo to run in my cordova app, but not if I try to add it to my app.

Hi, I just discovered this through anim-in-out, and I thought it would be a more flexible alternative..
The animation is smooth on PC but slightly laggy in iOS (iphone 6P / iOS 8.2)
As a comparison, using anim-in-out the state-transition anim is smooth.
tested using simple fade-in fade-out defaults, and some basic slide-in-left/right animations.

In particular, the lag seems to occur at the first ~200ms or so, then it's smooth after.
I suspect this is due to competing CPU resources with the actual page-loading controller Javascript codes. Due to JS nature of GSAP.
Where as CSS3-based transitions do not suffer from this.

One way to replicate this easily is load a Google Map API in the controller synchronously. (i.e. don't use a $timeout). The heavy processing of map loading causes a lot of lag in page transition animations.
(I know this isn't a best practice, just to replicate the symptom).

Any suggestions?

Angular throws me an error: TweenMax not defined.

I'm using Angular 1.4.8

Forgive me for improper wording, I'm a beginner at Angular. I've been having this weird bug where when I click on a page/link, the content of the current page moves down a bit before the next one comes in.

I found a weird "semi-fix" by adding "position: absolute;" to the element that's being routed(?). Not sure how to call it. But it's not really how I want to use it, so it's not a fix for me. Here's a video showing the problem and the "fix."

Hi

How would go about implementing a slider. Can I pass in something to apply a reversed animation when the I click there previous button?

Cheers
Olaf

hey

this might be a bit hacky but:

wrapping lines 252-257 in a timeout allows passing state.data through to the self.$get function on initial app load

any chance of getting this included?

ta

EDIT: that suggested fix causes other issues, sorry ignore it

Hi,
I get the error 'Could not resolve '' from state 'gsapifyRouterBlankState'' when using a resolve promise. Even if the time to resolve is 0

I edited a working plunker I found and I added the resolve example
http://plnkr.co/edit/YyMExg?p=preview

Hi,

Will angular asapify work with angular 1.3.7?

Cheers
Olaf

Hi,

Trying to use the router to open and close modal which overlays the site. Looking at the source it should only make the view visible onStart but it seems to start the animation right away. How can make it stay hidden on initialisation and only visible when I add child view?

Cheers
Olaf

There seems to be a bug, unless it's by designed, that your directive won't work with data-ui-view. Only ui-view seems to work and apply transitions.

I've tried both:

I would like to perform an action when the animation transitioning into a view is complete.

Putting in naively in the controller does not suffice, because that code executes as soon as the view is created (more or less) - and does not wait for the animation transitioning into the view to complete.

Is this an existing feature?

I'm getting that error message log, what I've done is just add this to the module config:

// Set default transitions to use if unspecified
        gsapifyRouterProvider.defaults = {

            // name of transition to use or 'none'
            enter: 'fadeDelayed',

            leave: 'fade'

        };

        // Enable transition on initial load
        gsapifyRouterProvider.initialTransitionEnabled = true; // defaults to false

Also I wanted to ask something else, I've got my views named, there's a main view, where a directive <mp-dash/> is loaded, inside that directive there are other 3 named views, so I add gsapify-router class to all the named views (the main, and the ones inside the directive), that directive loads another directive (<mp-options/>, It's ng-repeated also)... I'm experiencing a lag in the animation when I go to a state that contains the <mp-dash/> directive, there's a space generated in the top and the bottom of the element...

Any ideas?

Hi,

just wanted to let you know that angular-iu repo you have in your dependencies is closing soon

angular-ui/angular-ui-OLDREPO#577

what features is this using from the repo so it can be converted to use new sources?

Hi, playing with the library i can't fit it entirely in my scenario.

If we have an application with a navigation stack ios like, the flow of the views could be defined at runtime. For example an app with 3 screen could have a navigation flow like:
A -> B -> C -> C -> B -> C
Every view have his own "back" button for come back to the previous view, and the animation should be inverted.
Playing with animation priorities i can't find a way to satisfy this need.
I think a solution could be add an alternative animation for "back" transition.

ie:

{
     "enter": {
         "in": "right",
         "out": "fadeDelayed"
    },
    "leave": {
        "in": "fadeDelayed",
         "out": "right"
    }
    "back":  {
         "enter": {
             "in": "fadeDelayed",
             "out": "right"
        },
        "leave": {
            "in": "right",
             "out": "fadeDelayed"
        }
    }
}

And with some kind of option to set in $stateChangeSuccess event, so the app could define his navigation stack.

Do you think is possible have something like that?
Thanks

First of all, great work!

There is an issue when clicking multiple times on a ui-sref link. For example, when there is a animated statechange for let's say 0.5 seconds. Clicking the link 10 times will result in a statechange after 5 seconds (didn't really timed it exactly), no matter if you go to any other states during that time. It still will load the clicked state after that period of time. Something wrong with my code, or is this a real issue?

Hope you know what I mean, it shows up in Chrome, Safari works fine. Didn't test it in any other browsers at this time.

I'm new to bower so perhaps I may be missing something that is obvious.
Either way, what is the src file to link to in the index, so that I can inject 'hj.gsapifyRouter'?

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

I cannot get priority to obey what i've set, or to have any leave animations work with the latest ui-router.

Hopefully you haven't ditched the project! I love this plugin but it's causing a lot of inconsistencies for me currently. :(

Only enter blocks are honored, and priority changes nothing.

I need to set the animation from the controller when a button is clicked (I need to have more then 1 leave animation). I tried $state.current.data = {new animation} and it seems to work. Is there a better way to have multiple animations that are set in the controller.