I have an angular controller that loads 4-5 different resources from the server. Upon those resources being received the UI fills the necessary content for the page. The problem I'm having now is that the page load is not very smooth. The page's layout loads immediately, and then different elements pop into existence over the next 1-2 seconds. The load time isn't really the issue, it's just the abruptness of it. Is there a standard way to deal with this?
A trick I use is to default everything to opacity 0, then use CSS transforms to transform them to opacity 1 over about 250ms (quick fade). I apply a class when it's done loading by using the ng-class directive.
Give this code:
ng-class='{showme:hugeArray}' it should apply a class when hugeArray is done loading. Before hugeArray loads or exists, it will be undefined, therefore false and the class showme won't be applied. When hugeArray comes back from your resource, it exists.
Just combine that with this CSS:
.something {
opacity: 0;
text-align: center;
-webkit-transition: opacity 0.25s ease-in;
-moz-transition: opacity 0.25s ease-in;
-o-transition: opacity 0.25s ease-in;
-ms-transition: opacity 0.25s ease-in;
transition: opacity 0.25s ease-in;
}
.something .showme{
opacity: 1;
}
If you have to load the resources in your controller anyway, you should move this logic to the $routerProvider resolve property, so loaded resources get injected into controller once they are resolved. $route service won't make a routechange if a promise gets rejected, so everything is there when your view change happens.
There are a couple of different ways I can think of, here are a few. Here might be a simple one that you could change to fit your needs.
HTML
<body ng-show="object.length"> ...
Controller
$scope.object = Object.query();
Or you could use promise objects to know when they've finished loading. I don't know if you want to hide the body until they're loaded, display them all at the same time, or other.
I think the other answers here are good, but ngCloak is worth mentioning too. It would probably be best used in combination with the some of the other methods.
http://docs.angularjs.org/api/ng.directive:ngCloak
Related
I'm trying to use gatsby-plugin-transition-link in my gatsby site, in order to implement a page transition. I managed to install the packages fine, and implement AniLink correctly. the transition is almost working perfectly in my sandbox, but I'm getting a funny bug.
I'm trying to implement a cover page transition, whereby a coloured div slides across the page, covering it completely. Continuing to slide across the page until out of view, a new active page is revealed behind it.
The problem is: the initial page remains for a split second, even as the cover slides out of view. It overlaps the newly active page for a split second before vanishing. Why is this happening, and how can I make sure that the previously active page hides itself before the new active page displays?
here is a link to my sandbox: https://codesandbox.io/embed/m7z386ll6x
click on 'Go to page 2 transition link' on the index page, to see the bug in action. Once you click on the link, the blue cover slides across the page. As the cover slides out of view, still see all the text content from the index page overlapping the new content of page 2, for a split second.
I had a same issue today and just found good solution to it. Since there is two divs during transition I just simply added an animation to hide unmounting div when its covered by an image.
Note that animation time should be same as duration + add some extra-delay in animation to avoid blinks
.tl-wrapper--unmount {
/*
Just make sure animation time is same that transition duration in <AniLink />
as well add some delay (e.g. 0.2s as in example) to avoid weird blinking at the end
*/
animation: 1s ease-out 0.2s normal fadeout;
}
#keyframes fadeout {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
z-index: 0;
}
100% {
opacity: 0;
z-index: 0;
}
}
Demo
I am also having this issue but only when using AniLink with direction="left" or direction="right" direction="down" did not show this issue.
I have a component within a react/mobx application, which observes a certain property of a provided ui store. Whenever this property changes some elements of the component will hide / show.
As far as I understand it, the ReactCSSTransitionGroup is for animating components upon mount / unmount. How do I animate an element (a div to be precise) within a component, which is hidden via display:none but will appear upon chaning the store properties?
Instead of display: none you should set opacity: 0 to hide and opacity: 1 to show. Then you can animate the transition using basic CSS transitions like
-webkit-transition: all 1s;
transition: all 1s;
Check out css animation property. It will animate the element when it is added to the DOM. So, don't hide the element with display:none, but simply don't render it. When props changes just render it with css animation defined ;)
It is supported by all browsers, IE from v10 (which is quite enough).
I'm attempting to create animations for all children of .flow where each one has an increasing delay. I expected the following code to work, but apparently interpolation is not support in property values.
for i in (1..6)
.flow a:nth-child({i})
animation 1s 0.{i}s fadeIn both
This code would work for the delay, but wouldn't work for the child selector.
for i in 0.1s 0.2s 0.3s 0.4s 0.5s 0.6s
animation 1s {i}s fadeIn both
Any Ideas?
You need to use () in this case.
for i in (1..6)
.flow a:nth-child({i})
animation 1s (i / 10)s fadeIn both
As you can see from this jsfiddle:
http://jsfiddle.net/robcampo/pWGuS/
I'm trying to fade out an element and fade another in using Angular animations.
The fading (using opacity and transitions) works. However, as you'll see, it displays the previously hidden element before hiding the current element on display. That leaves you with both elements on display at once.
Question
Is there a way to wait until the first element has been completely hidden before showing the second element? Pretty sure I can do this with a custom directive but before going down that route I'd like to be sure there's no out-of-box way.
What I've tried
a) Put a transition-delay on the element being faded in:
.ng-hide-remove {
-webkit-transition: all 1s ease 1s;
transition: all 1s ease 1s;
opacity: 0;
}
b) Use a height property
This won't work for me because the divs that I'm hiding in my app are part of a grid system.
Note
If I was to implement this in jQuery, it'd be:
elementToFadeOut.fadeOut(1000, function() {
elementToFadeIn.fadeIn(1000);
});
Fixed:
http://jsfiddle.net/robcampo/pWGuS/10/
Used part of Zub's suggestion but also set the height of the container div dynamically so that it doesn't flicker when transitioning.
To achieve this, a directive was created and added to each of the corresponding fading elements (those with ng-show). This directive compares its element's height with that of the parent. If the parent has a lower height, it updates the parent (this prevents flickering):
if (height > parentHeight) {
$(element).parent().height(height);
}
To ensure not all ng-show/hides fade in/out, a the directive animateFade doubles as a CSS class that is applied to the fading animations:
.animate-fade.ng-hide-add {
-webkit-transition: all 1s ease;
transition: all 1s ease;
opacity: 1;
}
I have a div which contains article titles from an RSS feed. This makes the div size dynamic depending on which feed is being looked at, length of article titles, etc. I would like to make the change in div height be a smooth animation like you see here, except using angularJS instead of jQuery.
The only animation I've done with Angular is just a fade-in fade-out text type stuff using
ng-enter{opacity:0;} ng-enter-active{opacity:1;}
Which was fairly simple, so hopefully this will be as well.
Simple example, based on ngAnimate innate monitoring of adding and removing classes. Define 3 css classes :
.transformable {
-webkit-transition: height 100ms linear;
-moz-transition: height 100ms linear;
-o-transition: height 100ms linear;
-ms-transition: height 100ms linear;
transition: height 100ms linear;
}
.small {
height:100px;
}
.big {
height:300px;
}
and declare your div :
<div class="transformable" ng-class="{'small':isSmall, 'big':!isSmall}" ng-click="isSmall = !isSmall"> </div>
This should give you size-changing div on click : angular detects addition/removal of small/big classes and activates animation based on transformable css class values.
You can do similar things with other animation-ready directives (e.g. ng-repeat) or create your custom behaviours. The article from jessegavin seems like a good primer on this.