Ng-animate not working in AngularJS? - javascript

I'm working on a mobile app using Phonegap and AngularJS. I'm currently just developing and testing on a local wampserver for ease.
I'm trying to get ng-animate working on my ng-view, in order to animate changing of views similar to mobile apps. Any guide I follow or any code I use doesn't seem to do anything at all. No errors or animations.
Here's my current ng-view code:
<body ng-view ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></body>
And here's my current CSS for that ng-animate:
.view-enter, .view-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.view-enter {
opacity:0;
left:100px;
width:100%;
position:absolute;
}
.view-enter.view-enter-active {
left:0;
opacity:1;
}
.view-leave {
position:absolute;
left:0;
width:100%;
opacity:1;
}
.view-leave.view-leave-active {
left:-100px;
opacity:0;
}
And yet, no errors or animations at all. Any ideas of what I'm doing wrong or how I can get animations working? Thanks.

My problem was pointed out thanks to Michal Charemza... I was on the latest stable version of AngularJS, 1.0.7, and ng-animate is only in the unstable versions. I downloaded 1.1.5 from here and the above code for animations worked instantly.

Related

How to improve this animation?

I have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it
As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.

CSS transition not working on Firefox

I have a div #im1 with initial position left:-300px;
When a button .abtme_link is clicked the javaScript changes it's position to 443px;
It's working on every other browser than Firefox; I've seen some other posts on this matter but can't seem to make it work;
One of the thread concluded that css transition doesn't work on Firefox, If that's the case; is there a workaround?
#im1{
width:400px;
position:absolute;
left:-300px;
transition:all .9s ease .5s;
-webkit-transition:all .9s ease .5s;
-moz-transition:all .9s ease .5s;
-o-transition:all .9s ease .5s;
-ms-transition:all .9s ease .5s;
}
$('.abtme_link').click(function() {
$('#im1').css('left','443px');
});
OK so I've found a solution,
I've added a delay function in JS and it's working fine. Don't know why or how but it's working.
setTimeout(function(){
$('.im1').css('left','443px');
},10);

Overriding transition-delay issue on Firefox

I having issue to override transition-delay on firefox. Below example works as i expected in Chrome and IE but at Firefox, before animation it is delaying. I am not able to override transition-delay on firefox before animation starts. I believe this is a bug but what is workaround of this problem?
Here is jsfiddle link
Here is Html Codes
<button>move</button>
<div class="box"></div>
Javascript
$('button').click(function(){
$('.box').addClass('move').on('transitionend',function(){
$(this).removeClass('move');
});
});
And CSS
.box{
height:100px;
width:100px;
background-color:yellow;
transition:all 1s ease 1s;
position:absolute;
left:0;
}
.move{
transition-delay:0;
left:500px;
}
You just need to include a unit (seconds in this case):
.move {
transition-delay: 0s;
left: 500px;
}
Updated fiddle
This answer explains why: Units on "0s" Transition in Firefox

Animations in AngularJS ng-show

I'm trying to get an ng-show element to animate when it becomes visible/hidden.
But it just acts like a normal ng-show, instand show/hide.
I found this example: http://jsfiddle.net/Kx4TS/1/
which works fine.
yet, if I use the same ng-animate attribute and the same css, it doesn't work in my case.
Is there anything else I need to do or cases where animations won't work?
my code looks like this:
<div style="" ng-show="item.hasMax()"
class="box" ng-animate="{show: 'fadeIn', hide:'fadeOut'}">
and the css is:
.fadeIn-setup,.fadeOut-setup {
-webkit-transition: 1s linear opacity;
-moz-transition: 1s linear opacity;
-o-transition: 1s linear opacity;
transition: 1s linear opacity;
}
.fadeIn-setup{
opacity:0;
}
.fadeOut-setup{
opacity:1;
}
.fadeIn-setup.fadeIn-start {
opacity: 1;
}
.fadeOut-setup.fadeOut-start{
opacity:0;
}
Also, is it possible to make ng-animate do stuff like the jquery slideDown / slideUp animations?
The fiddle example uses Angular version 1.1.4. Make sure you also have a newer version of angular available. I suggest you get the latest version. Right now it is the 1.1.5, which has some important bug fixes.
The animation approach changed with Angular 1.2. Here's an article (year of moo post) that explains the differences. It's much simpler now - doesn't require ng-animate.

Twitter Bootstrap modal: How to remove Slide down effect

Is there a way to change the Twitter Bootstrap Modal window animation from a slide down effect to a fadeIn or just display without the Slide? I read through the documentation here:
http://getbootstrap.com/javascript/#modals
But they don't mention any options for changing the modal body slide effects.
Just take out the fade class from the modal div.
Specifically, change:
<div class="modal fade hide">
to:
<div class="modal hide">
UPDATE: For bootstrap3, the hide class is not needed.
The modals used by the bootstrap use CSS3 to supply the effects and they can be removed by eliminating the appropriate classes from modals container div:
<div class="modal hide fade in" id="myModal">
....
</div>
As you can see this modal has a class of .fade, meaning it is set to fade in and.in, meaning it will slide in. So just remove the class related to the effect you wish to remove, which in your case is just the .in class.
Edit: Just ran some tests and it appears that that is not the case, the .in class is added by javascript, though you can modify he slideDown behavior with css like so:
.modal.fade {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
Demo
If you like to have the modal fade in rather than slide in (why is it called .fade anyway?) you can overwrite the class in your CSS file or directly in bootstrap.css with this:
.modal.fade{
-webkit-transition: opacity .2s linear, none;
-moz-transition: opacity .2s linear, none;
-ms-transition: opacity .2s linear, none;
-o-transition: opacity .2s linear, none;
transition: opacity .2s linear, none;
top: 50%;
}
If you don't want any effect just remove the fade class from the modal classes.
I believe that most of these answers are for bootstrap 2. I ran into the same issue for bootstrap 3 and wanted to share my fix. Like my previous answer for bootstrap 2, this will still do an opacity fade, but will NOT do the slide transition.
You can either change the modals.less or the theme.css files, depending on your workflow. If you haven't spent any quality time with less, I'd highly recommend it.
for less, find the following code in MODALS.less
&.fade .modal-dialog {
.translate(0, -25%);
.transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate(0, 0)}
then change the -25% to 0%
Alternatively, if you're using just the css, find the following in theme.css:
.modal.fade .modal-dialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
and then change the -25% to 0%.
I solved this by overriding the default .modal.fade styles in my own LESS stylesheet:
.modal {
&.fade {
.transition(e('opacity .3s linear'));
top: 50%;
}
&.fade.in { top: 50%; }
}
This keeps the fade in / fade out animation but removes the slide up / slide down animation.
I have found the best solution that removes the slide but leaves the fade is by adding the following css in a css file of your chosing which is invoked after the bootstrap.css
.modal.fade .modal-dialog
{
-moz-transition: none !important;
-o-transition: none !important;
-webkit-transition: none !important;
transition: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
}
I didn't like the slide effect either. To fix this all you have to do is make the the top attribute the same for both .modal.fade and modal.fade.in. You can take off the top 0.3s ease-out in the transitions too, but it doesn't hurt to leave it in. I like this approach because the fade in/out works, it just kills the slide.
.modal.fade {
top: 20%;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.modal.fade.in {
top: 20%;
}
If you're looking for a bootstrap 3 answer, look here
Just remove the fade class and if you want more animations to be perform on the Modal just use animate.css classes in your Modal.
you can also overwrite bootstrap.css by simply removing "top:-25%;"
once removed, the modal will simply fade in and out without the slide animation.
look at http://quickrails.com/twitter-bootstrap-modal-how-to-remove-slide-down-effect-but-leaves-the-fade/
.modal.fade .modal-dialog
{
-moz-transition: none !important;
-o-transition: none !important;
-webkit-transition: none !important;
transition: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
}
I'm working with bootstrap 3 and the Durandal JS 2 modal plugin. This question was on top of Google results and as none of the answers above is working for me I thought I'd share my solution for future visitors.
I override the default Bootstrap's Less code with this in my own less:
.modal {
&.fade .modal-dialog {
.translate(0, 0);
.transition-transform(~"none");
}
&.in .modal-dialog { .translate(0, 0)}
}
That way I am left with only the fade effect, and no slideDown.
.modal.fade, .modal.fade .modal-dialog {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
The question was clear: remove only the slide: Here is how to change it in Bootstrap v3
In modals.less comment out the translate statement:
&.fade .modal-dialog {
// .translate(0, -25%);
just remove 'fade' class from modal class
class="modal fade bs-example-modal-lg"
as
class="modal bs-example-modal-lg"
Wanted to update this. Most of you have not completed this issue. I'm using Bootstrap 3. none of the fixes above worked.
to remove the slide effect but keep the fade in. I went into bootstrap css and (noted out the following selectors) - this resolved the issue.
.modal.fade .modal-dialog{/*-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out*/}
.modal.in .modal-dialog{/*-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)*/}
The following CSS works for me - Using Bootstrap 3.
You need to add this css after boostrap styles -
.modal.fade .modal-dialog{
-webkit-transition-property: transform;
-webkit-transition-duration:0 ;
transition-property: transform;
transition-duration:0 ;
}
.modal.fade {
transition: none;
}

Categories

Resources