Angular JS 1.2 - animating child elements with ng-show - javascript

Dearest stackoverflowers,
I'm new to Angular JS and have read some stuff on how to animate the Angular way, still I'm very much confused on how to correctly implement it and what classes get added when and where. I feel like I had much more control over my animations with traditional jQuery (adding and removing classes). But maybe this is just because I'm used to it that way.
On pageload I want certain elements to animate in. So in my controller, on pageload, a variable (pageLoaded) gets set to true. And my surrounding content-wrapping div will have ng-show="pageLoaded".
This way I have successfully added an animation on the entire page using following CSS transitions/animations:
.page.ng-hide-add, .page.ng-hide-remove {
display:block!important;
}
.popup.ng-hide-add {
-webkit-animation: 450ms bounceInRight reverse;
}
.popup.ng-hide-remove {
-webkit-transform: translateX(100%);
-webkit-animation: 750ms bounceInRight;
}
But once I try to address child elements, the animations fail.
.page.ng-hide-add .child, .page.ng-hide-remove .child {
display:block!important;
}
.popup.ng-hide-add .child {
-webkit-animation: 450ms bounceInRight reverse;
}
.popup.ng-hide-remove .child {
-webkit-transform: translateX(100%);
-webkit-animation: 750ms bounceInRight;
}
Is this not supported by Angular? Or am I doing something wrong?
And if I understand correctly, no matter if you're using ng-hide, or ng-show..
the ng-hide classes should be used? Where they follow following logic:
ng-hide-remove/ng-hide-remove-active show the element
ng-hide-add/ng-hide-add-active hide the element
Can someone explain the difference between the regular and the active classes? How should they be used?

It seems that Angular scans the document for things to animate, I have found that when wanting to animate a child element. You have to set a transition on the parent for as long as you want the children to transition.
For example.
.page.ng-hide-add, .page.ng-hide-remove {
-webkit-transition: 1000ms;
}
.page.ng-hide-add .child, .page.ng-hide-remove .child {
display:block!important;
}
.popup.ng-hide-add .child h1 {
-webkit-animation: 450ms bounceInRight;
}
.popup.ng-hide-add .child h2 {
-webkit-animation: 750ms bounceInRight 250ms;
}
Angular will only add the 'animation' classes, if the HTML element with the NG-IF/NG-SHOW or ng-whatever element has a transition in the CSS specified for it.

Related

Using Multiple CSS Transform Functions in Separate Animation Classes Doesn't Work

I am building a subtitle editor that has customisation tools for toggling animations that can scale and move text. Each animation is atomic and has a CSS keyframe. Example of two animations:
#keyframes upward {
from {
transform: translateY(0px);
}
to {
transform: translateY(-30px);
}
}
#keyframes stretch {
from {
transform: scaleY(1);
}
to {
transform: scaleY(1.1);
}
}
Each subtitle uses a specific class, which has the above animations (this can be seen in the code below). Each animation has a checkbox in HTML, whose value JavaScript uses to toggle the animation-play-state property through a custom property (e.g. --happy-animation-stretch-state), which causes the animation to either pause or run.
.happy {
display: inline-block;
color: var(--happy-colour);
animation: upward var(--animation-duration), stretch var(--animation-duration);
animation-play-state: var(--happy-animation-upward-state), var(--happy-animation-stretch-state);
transition: 0.3s;
}
The problem is that only one of the animations works. I am not sure what is wrong?
EDIT: I managed to solve this by enwrapping the element I was trying to transform in multiple divs - one for each animation. Here is the original solution.

Is it possible to make smooth page navigation transitions in Wicket?

I would like to make some smooth transitions between pages navigation in Wicket Java framework. Is it possible with Wicket tools, javascript and css? I cant find a way to do that.
Thanks for any answer.
Wicket does not provide solutions for this. Most of the Wicket applications use either full page re-remder/redirect or Ajax for updating just part(s) of the page, but not the whole body.
I'd suggest you to try with CSS Keyframes. The idea is to add CSS class to the body of your pages on these two JS events: beforeunload and DOMContentLoaded (aka domready). When beforeunload is fired you need to remove fade-in and add fade-out CSS class. And do the opposite for DOMContentLoaded.
The CSS will look like:
/* make keyframes that tell the start state and the end state of our object */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
I am not very good in CSS so better ask Google for more info.

Triggering css animate class on scroll

I am using the animate.css classes on my page.
Currently I have all animations built on hover function.
For example:
#folder:hover .middle-button{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
}
I would like to activate these animation classes on scroll and my question is:
What would be the easiest way to trigger this class using a Javascript function?
This is the best I can do: http://codepen.io/zvona/pen/ovDbk
It will add class visible to all the elements with className onAppear.
So, you can add class for all the elements that you want to animate on appear:
<div class="onAppear">This will be animated.</div>
And then on CSS (transition example, not animation - figure it out by yourself):
.onAppear {
transition: transform 500ms;
}
.onAppear.visible {
transform: translate3d(250px, 0px, 0px);
}
Hope this helps.

How to create show and hide an element in my case?

I am having a weird issue with no-show in my app.
I have something like
<ul ng-click="open =!open">
….
</ul>
When I click my ul, I want to animate a div to show.
so I have
<div id='wrapper' ng-show='open'>
…..
</div>
I was able to show and hide my wrapper div but I need to have animation during the transition.
so I add
.ng-hide {
opacity: 1.0;
display: block !important;
transition: opacity 2s;
}
.ng-hide {
opacity: 0;
}
.ng-show {
opacity: 1;
display: block !important;
transition: opacity 1s;
}
.ng-show {
opacity: 0;
}
Turns out the hide action will have a 2 second animation but not show action.
Can anyone help me about this issue? I really have hard time understanding it.
Thanks.
ngShow (just like ngHide) adds/removes the ng-hide class in order to show or hide an element.
In order to enable animation with ngHide/ngShow, you need to include the ngAnimate module as a dependency to your app.
ngAnimate will add some extra classes which will enable your animation to be properly defined using CSS.
The docs have detailed instructions on how to achieve this (this is for v1.2.16).
Note that depending on the version of Angular, animations might need to be defined differently (e.g. things changed in v1.3).
The solution below is based on v1.2.16:
// HTML
<div id="wrapper" class="animate-show" ng-show='open'>...
// CSS
.animate-show {
opacity: 1;
transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
display: block !important;
}
.animate-show.ng-hide {
opacity: 0;
}
See, also, this short demo.
If you watch the DOM while hiding and show your div, you'll see that when an element is hidden, ng-hide is added to its class list, but there is no corresponding ng-show class added when the element is shown. This is why you're seeing an animation when the element is hidden but not when it's shown.
Your best bet for animation is ngAnimate.
Load script:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.9/angular-animate.js"></script>
Inject module into app:
angular.module('myApp', ['ngAnimate']);
Use the ngAnimate classes:
.ng-hide-add,
.ng-hide-remove {
display:block!important;
}
.ng-hide-add.ng-hide-add-active {
transition:all linear 2s;
}
.ng-hide-remove.ng-hide-remove-active {
transition:all linear 1s;
}
.ng-hide {
opacity:0;
}
Plunker Demo
UPDATE: As I see #ExpertSystem just posted similar instructions, note that my code uses 1.3 versions of Angular and ngAnimate. So, depending on which version of Angular you're using, you can quite possibly pattern your code after theirs or mine.

Hide div when "animate-delay: 1s;" still ongoing and display after the delay

I am using the following CSS file in order to add some animations to my website that I'm building:
http://www.justinaguilar.com/animations/scrolling.html
Its concept is pretty simple - You add class names to your div to have it animated when you get to it when you scroll the page up/down.
I want to add a tweak there, which will add a slight delay between each animation. That way, all the animations in the same line, would appear one by one, and not all by together at the same time.
My idea was to add a class name, for instance: delay-1, and it will add animate-delay: 1s; to it.
Here's a live example of what I want to do. Scroll down and see how "Our Progress" displays each animation with a delay:
http://demo.qodeinteractive.com/river/home-anchors/#home_presentation
Is this something I can do with CSS3 only? whether the answer is yes or no I would be much appreciate any help.
Yes, CSS3 transition will do the trick , i have a demo page set up long time ago. You can refer to it..
As you can see, the first item has a 2s delay and the second item has no delay. Good Luck
#demo:hover {
width: 300px;
transition-delay: 2s
}
#demo1:hover {
width: 300px;
transition-delay: 0s
}
http://jsfiddle.net/zFbkL/
try to define class like this:
.delay-1 {
animation-delay:1s !important;
-webkit-animation-delay:1s !important;
}
no idea if it will work ...but worth trying
..yes ...it will do the job - it worked for me
You would still need to add a class to the section when you scroll to it via Javascript but you can use nth-child() to target each one.
Let's say there's 4 steps you could do:
.steps .step:nth-child(1) { transition-delay: 1s; }
.steps .step:nth-child(2) { transition-delay: 2s; }
.steps .step:nth-child(3) { transition-delay: 3s; }
.steps .step:nth-child(4) { transition-delay: 4s; }
Though, with an unknown number of steps you're better off scripting this out I think.
$('.steps .step').each(function(i){
$(this).css('animation-delay', i + 's');
});
Then, set off the animations by adding a class to .steps.
.steps .step { trainsition: all 1s; opacity: 0; width: 0;}
.steps.in-view .step { opacity: 1; width: auto; }
Hopefully this is what you were aiming for.

Categories

Resources