Angular ngAnimate not working first time on page load - javascript

I'm using ngAnimate which works great except for the first time after page load.
I have some html like this:
<!--other html here-->
<div class="content" ng-view></div>
The view updates when links are clicked using routing like so:
app.config(function($routeProvider) {
$routeProvider
.when('/newcontent', {
templateUrl : 'views/new-content.html',
controller : 'ContentCtrl'
});
});
Now I have my CSS setup to animate the content box so it slides in and out.
.content.ng-enter,
.content.ng-leave {
-webkit-transition: all 600ms cubic-bezier(.3,1,.5,1);
transition: all 600ms cubic-bezier(.3,1,.5,1); }
.content.ng-enter,
.content.ng-leave.ng-leave-active {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%); }
.content.ng-enter.ng-enter-active,
.content.ng-leave {
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%); }
Note that this all works perfectly except the first time one of the links is clicked and the view updates, the animation does not happen, the content box just appears. I've noticed this on more than one project I've worked on now. What's happening?!

Update:
It looks like working properly again in v1.3.10.
Original answer:
I've just run into this problem after upgrading angular (and angular-animate) to v1.3.8. Reverting back to v1.2.28 made this work again. (Albeit I'm using Javascript animations instead of class based ones.) I'm not sure if it's an intended change or a bug, maybe someone with deeper knowledge of angular and the changelog could provide further info on this...

Related

Trigger css animation only once images have loaded

I'm using animate.css (FadeInDown) on some images and text on page entry.
Runs fines locally, but on server it's not smooth at all because of all the images that need to be loaded (not massive file sizes, just many images).
The problem: animate.css kicks in (on page load), but while the images are half loading. I know I can 'display: none' the images and use JS/LazyLoad to show the images once loaded, but by then animate.css has already triggered.
So I think I need:
A. to delay animate.css until exactly when the images are loaded/displayed
or failing that, B. once you clicked a link to a page, it doesn't proceed to the next page until everything is fully loaded.
Anybody who can help?
animate.css
#keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
In jQuery, you can use $(document).ready() to execute a function when the DOM is loaded and $(window).on("load", handler) to execute a function when all other things are loaded as well, like images.
so basically, you can use this:
$(window).on("load", function(){
// '#yourElement' this is the id of the html element you want to animate.
// you can also use any other selector as well.
$('#yourElement').addClass('animated fadeInDown');
});
If you want to set animation on each image separately, when individual image is loaded you can do it something like this:
$("img").one("load", function() {
$(this).addClass('fadeInDown');
}).each(function() {
if(this.complete) $(this).load();
});

How to get CSS animated background image which is currently displaying using java script

Currently i am running CSS based ken burn effect using opensource code https://codepen.io/anon/pen/VzYRWV
I would like to know how to get the current image which is getting displayed in text box shown in the above demo.
Thanks for your kind help.
Try these CSS effects https://jsfiddle.net/ipsjolly/cugLbrfu/4/
.parent.rotate:hover .child, .parent.rotate:focus .child {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
.parent.scalein:hover .child, .parent.scalein:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.parent.scaleout:hover .child, .parent.scaleout:focus .child {
-ms-transform: scale(0.9);
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
Created two new scale In and Scale Out
Source
https://css-tricks.com/zooming-background-images/
You can catch css-animations events with javascript function addeventlistener
Ex.
// first image
var img = document.getElementsByClassName('slideshow-image')[0];
// fired on animation start
img.addEventListener("animationstart",function() {
// do stuff here
console.log("Animation start");
},0);
Now, although this works well and how it is supposed to do it, with (not your) example will not work well since the animation is not sequential but all at the same time. (Controls the percentage instead of "steps")
But, you can get the idea and play with it to archive what you're looking for.
Important note: Vendor prefix is still used.
Additional references:
Event reference
animationstart A CSS animation has started.
animationend A CSS animation has completed
animationiteration A CSS animation is repeated.
transitionstart A CSS transition has actually started (fired after any delay).
transitioncancel A CSS transition has been cancelled.
transitionend A CSS transition has completed.
transitionrun A CSS transition has began running (fired before any delay starts).
Detecting CSS Animation Completion with JavaScript
CSS Animation Events
SO tag addeventlistener
SO tag css animations

What CSS / JS tricks drive the mirror inverted http://com.google April fools page?

Maybe you saw the hillarious https://com.google/ mirror inverted (and actually functional) version of Google.com. I just looked at its source briefly but couldn't quite figure out what the core programming tricks at play are that allow this to work.
The folks at Google seem to load the regular google.com page in an i-frame but then what? Can anyone explain how they pull this off?
A combination of two css rules:
.text {
transform: rotateY(180deg);
text-align: right;
}
<div class="text">Reverse me</div>
UPD: Rules used for compatibility on the actual com.google page:
body {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Uses a transform to make a mirror effect, in layout
the google uses
.mirror {
transform: rotateY(180deg);
}
but can be used too
.mirror {
transform: scale(-1, 1);
}

Page transition animation similar to Medium.com

I'm trying to find out how does medium do the animation when you click the bottom button to load the next article.
To see it, please head over to a Medium article, scroll to bottom and click to go to the next article.
I know how to use AJAX to load another page, but how can I use a similar animation ? I've searched through their code, but couldn't find it.
is similar to jquery pop effect
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/
try pop effect on page.
it is just a css transition combination of scale and fade;
You can try to achieve the same effect using combination of css-animations and javascript. As a starting point you can look at effeckt.css it's a collection of css animations. Unfortunately it doesn't contain exact animation, so I've tried to reproduce it in this fiddle
The basic idea is to use two effects scaleDownFromFront and slideFromBottom:
#keyframes scaleDownFromFront {
to {
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes slideFromBottom {
from {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}

jQuery Slidetoggle Rotate 45deg and back

I am trying to make the element rotate 45ยบ on click action, the toggle element should open.
If you click on it again I want it to rotate back and the toggle element should close.
I have tried a lot of codes, I would like to keep it as simple as possible.
Plugin I am using
jQuery:
$(".category-desc-toggle").click(function () {
$('.category-desc').slideToggle(300);
$(".category-desc-toggle").toggleClass("rotate45");
});
Css:
.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.category-desc-toggle {
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
What am I doing wrong? Is there an easier way(Less code)?
Indeed JuanT is right that CSS3 can accomplish the transformation, See Firefox MDN Link for more info.
jsFiddle: http://jsfiddle.net/7K6GP/4/
<div class="description-wrapper">
<div class="category-desc-toggle rotate"></div>
<div class="category-desc">Just Some Description</div>
</div>
<script>
$(".description-wrapper").click(function() {
$(this).children('div.category-desc').slideToggle(300);
$(this).children('div.category-desc-toggle').toggleClass("rotate45");
});
</script>
Without knowing your requirements, its hard to give you a full answer. Though, this can be accomplished with css3's rotate and transition property.
transform: rotate(45deg);
I have created a jsfiddle demonstrating this. http://jsfiddle.net/hGZbW/
EDIT:
If anyone is trying to accomplish this without CSS, there is a jquery plugin that supports most major browsers. To accomplish this affect for IE you would need to use the matrix filter.
https://github.com/heygrady/transform/wiki

Categories

Resources