I have a weird issue with ngAnimate in a simple application I'm doing with the MEAN Stack.
Both angular.js and angular-animate.js are 1.4.7 version.
I have an ul that looks something like this:
<ul>
<li ng-repeat="item in items" class="fade">
{{item.name}}
</li>
</ul>
In the controller I'm getting the items array with an $http.get() call to the MongoDB.
This is the CSS code for the simple animation:
.fade {
transition: 1s linear all;
-webkit-transition: 1s linear all;
}
.fade.ng-enter {
opacity: 0;
}
.fade.ng-enter.ng-enter-active {
opacity: 1;
}
If for example I refresh the page,the controller gets the items array from the Database, and the list items fade in, but they fade out right after the fade in effect.
What is causing this undesired fade effect back to opacity:0 ? Could it be the way the functions I'm using the get the data interact with the view?
It turns out it was a default Bootstrap.css class called '.fade', which has opacity:0 rule;
Overriding that class in my style.css solved the undesired fade out. I hope it helps.
Related
I'm using slideUp and slideDown to animate sections hiding and showing using AngularJS's ngShow. It works fine, but I'd much rather have slideLeft and slideRight. How would I go about recreating slideUp and slideDown for those?
slideUp automatically hides the the element and slideDown automatically shows it - how would I be able to configure this such that they hide and show when I want then to? e.g.:
$(element).slideLeftAndHide();
$(element).slideLeftAndShow();
As opposed to
$(element).slideUp(); // $element.slideUpAndHide();
You can use the following to achieve this:
$('#element').show("slide", { direction: "left" }, "fast");
Since you tagged Angular.js, I assume you're also using Angular. You should prefer using something like ng-class instead of literally showing and hiding elements with jQuery. This is a good, modular way to do what you want using existing Angular.js capabilities and fast CSS animations.
I also assume that you're doing the show/hide part in response to some sort of conditional value changing, is that right?
If so, to start off:
1. When the conditional value changes, let the DOM know by adding a class name when a condition turns true.
<div ng-class="{showing: myDataFinallyLoaded}">...</div>
In this case, if myDataFinallyLoaded is true, the div has a showing class attached.
2. When the div has a showing class name attached, animate it into view.
div {
transform: translate(-100%) scale(0);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
div.showing {
/* Any CSS rules can go in here! */
transform: translate(0px) scale(1);
opacity: 1;
}
3. When your condition becomes true, update the scope.
someRandomAPI.loadEverything().then(function() {
$scope.myDataFinallyLoaded = true;
});
How can I disable transition animation for a certain view completely?
I do not want to:
disable for the whole app with configuration
use navTransition directive which simply hacks the next transition and works only on element when clicked: https://github.com/driftyco/ionic/blob/e2727d2e8f0815c3418e1fc29c92e2180e513408/js/angular/directive/navTransition.js
Ideally I am looking for an attribute to set on ion-view or ion-nav-view
ui-view supports noanimation="...", but it doesn't work in ionic
The only thing I could find was:
HTML
<ion-nav-view>
<link ng-href="css/styleSlide.css" rel="stylesheet" />
styleSlide.css
/* untested */
[nav-view-transition="ios"] [nav-view="entering"],
[nav-view-transition="ios"] [nav-view="leaving"] {
-webkit-transition-duration: 0ms;
transition-duration: 0ms;
}
Answer from malix is a step in good direction, however there is no need for such conditional css. What I ended up using is an id on the ion-view element and I used:
#header-sub-content ion-view[nav-view="entering"] {
transition-duration: 0ms;
}
#header-sub-content ion-view[nav-view="leaving"] {
transition-duration: 0ms;
}
However, this leaves a slightly strange flicker effect which I didn't bother to solve because what I acually needed is to hide the animation which is leaving and only show the one which "enters":
#header-sub-content ion-view[nav-view="entering"] {
display: block;
}
#header-sub-content ion-view[nav-view="leaving"] {
display: none;
}
I want to use backbone to render a view? But I want the view to animately appear to the user. It should fade then scale just like the animation for Fade and Scale here:
http://tympanus.net/Development/ModalWindowEffects/
Here's my code:
if (!this.firstUseOverlayView) {
this.firstUseOverlayView = new NPWFirstUseView({
isOverlay: true,
el: '.first-use-overlay'
});
}
this.firstUseOverlayView.render();
This renders the view into the main div. I want the view to transition (fade and scale) when it appears to the user. Please see link above. How can I accomplish this?
I believe that since the view gets added to the DOM dynamically, it's as easy as putting a CSS animation on it.
Here's a JSFiddle with a demo, and the relevant CSS is below (without vendor prefixes, for simplicity).
#keyframes imageFadeIn {
0%{opacity:0; transform: scale(0.5)}
100%{opacity:1; transform: scale(1)}
}
.first-use-overlay {
animation:imageFadeIn 0.3s 1 ease-out;
}
I've built an app where I browse instagram API and fetch photos. After that is done I use Handlebars to make a template with undordered list and images inside. I'm trying to get images to slowly fade in as soon as the template is loaded, but to no avail. So far it looks like this
In my template I add class hidden that sets the opacity to 0, so then I can just remove the class to show the image.
<template id="image-template" type="text/x-handlebars-template">
<ul>
{{#each this}}
<li>
<img class="hidden" src="{{url}}">
</li>
{{/each}}
</ul>
</template>
After setting everything in JS
var template = Handlebars.compile( source.html() )
var html = template( images )
$('#container').html( html )
At this point I should have the images in the container, so I should be able to use
$('img').removeClass('hidden')
and have images slowly fade in, however thats not happening.
After a bit of investigating I realised that those images aren't quite available for me, so I set up a pub/sub after adding template to html
$('#container').html(html)
$.publish('insta/photoTransition')
I was sure that calling another function after this would work, but still no result. After that just out of ideas I setTimeout before publishing, and what do you know, my assumptions were true and with a delay it finally worked. However I don't want to wait a set amount of time to show the photos, I would like to show them as soon as possible. Before I try to figure out how deferreds work to try my last idea, are there any better ways to solve my problem?
Just use css transitions.
#image-template img{
opacity: 1;
transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
}
#image-template img.hidden{
opacity: 0;
}
I tried to use animations within my app but unfortunately to no avail. I checked lots of examples, blog, downloaded animate.css etc etc.
I injected animation module, tried basic examples, tried following tutorials for instance, but it seems I miss something every time.
Can someone please provide exact instructions for AngularJS v1.2 animations to work, with injections, inclusions and everything you need to do to get them working? Maybe a step-by-step instructions on how you usually do your animations.
A basic fadein/fadeout example on ng-show/hide would suffice.
Thank you very much
Reference angular-animate.js
Add ngAnimate as a dependent module:
myApp = angular.module('myApp', ['ngAnimate']);
Add a div to your view with the ng-show directive and for example the two classes 'fadein' and 'fadeout':
<div class="fadein fadeout" ng-show="show">I am the div.</div>
Add the classes to your css. In 1.2 ngAnimate is class-based and you need to add certain suffixes to your classes based on a certain naming convention. A good source of information regarding this can be found here.
Example:
/* Fade in ngShow */
.fadein.ng-hide-remove {
-webkit-transition: 1s;
transition: 1s;
display: block !important;
opacity: 0;
}
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
/* Fade out ngShow */
.fadeout.ng-hide-add {
-webkit-transition: 1s;
transition: 1s;
display: block !important;
opacity: 1;
}
.fadeout.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
Add logic to change the expression that is provided to the ng-show directive and the div should fade in and out.
A working example: http://plnkr.co/edit/lq4LmUq5mrbJBGMMEyh9?p=preview