ngAnimate when used with routings has different "CSS Styles" that can be set to produce different transitions.
Is this the correct template that will cover all CSS Options for a transition?
myAnimation = represent my css template.
.myAnimation {}
.myAnimation.ng-enter {}
.myAnimation.ng-enter-active {}
.myAnimation.ng-leave {}
.myAnimation.ng-leave-active {}
Is there any guide or documentation on what is being affect and when?
I have been playing with those for a while and I still do not understand the role each of those CSS items and the role they play in the animation and I am referring to the "despairing view" and the "new view" . I understand this involves understanding CSS as well but what I am looking for is to understand this using the simplest CSS... something a developer could use to evolve from there.
When it comes to Angular animations, year of moo is your best friend. This is the blog from the author of ngAnimate Matias Niemela.
I would start off with this post: Remastered Animation in AngularJS 1.2, but do check out his other posts like Staggering Animations in AngularJS and others.
Remastered Animation in AngularJS 1.2 really covers 99% of what you need to know about animations in angular and provides explanations and examples on CSS Transitions, CSS Keyframe Animations, as well as JavaScript Animations for all the build-in Angular directive that supports animations out of the box: ngView, ngInclude, ngIf, ngSwitch, ngClass, ngShow, ngHide as well as how to apply it on your own custom directives.
Related
It is possible?
I mean this:
<div style="?css animation?"> Content </div>
It can be any tag, or maybe triggering the animation or transition from other tag.
This question is because I will like to use animations and transitions in a web app, but this app just let me use css included in the style tag attribute.
Pseudo clases I guess are out of the question so I can not trigger transitions, neither I can use javascript, so onmouseover or similar kind of stuff are out of the question.
Animations on the other hand needs their keyframes settings, and I can not set keyframes inside a style tag.. (or can I?). I read something similar here:
https://css-tricks.com/animate-to-an-inline-style/
But I guess it would not work for what I am asking.
Not sure if there is a hack to import a css from an attribute or just achieve animations in chrome browsers (another thing, I have not access to the head section of the html).
Yeah I know, it seems mission impossible, I was just wonder in case there is some kind of trick to achieve this even if the animation is very limited.
Thanks for your time.
No, afaik.
Atleast not for those animations that require :hover or keyframes as you mentioned. However, it is possible by including animations attached to <style> contained within the same html page. Or by injecting css code using js code on the same html page . This suits if you are okay with CSS resting in the same file.
The link you've mentioned is NOT using inline CSS for animation; it has a separate CSS file.
I've been working with React for a little while but animations is one thing that is confusing me.
Currently I use CSS in my react components. Each component imports a single css file that I use for styling instead of using inline css.
My question is: If I have a page like a landing page where there is no state being updated whether it is fine to use keyframe animations and similar things in css?
Side-question: Am I free to use keyframes for a non updating page like a landing page, or will it totally break for more complicated pages?
You are 100% safe to use any CSS you want in your pages. CSS is merely a language used for describing the style and presentation of your elements. React doesn't care about all that; it cares only for the DOM of your page - or at least the part of the DOM that React created/controls.
The Document Object Model (DOM) [...] provides a structured representation of the document as a tree.
CSS doesn't (cannot) interact with the tree structure of the DOM, nor do CSS animations. They just apply style properties to the elements which, depending on the animation, may give the impression that the layout of your DOM tree changes, but this is not the case.
So to answer both your questions: No css will break your code or otherwise interfere with React, regardless of implementation.
I am using Angular with ngAnimate for a couple of cases. In another, I have a directive that is changing the width of the column (using Bootstrap col-md-* classes) and a simple transition that looks like this:
.column-view .column {
transition: width 1s;
}
I am not explicitly using ngAnimate here, but it is certainly causing me grief simply for being included. Basically, the transition jumps to zero before transitioning to the new width. If I remove ngAnimate from my module, the transitions are smooth, but I need ngAnimate for other features in my app.
Can I disable whatever ngAnimate is doing to my plain CSS transition? What can I do here to fix this? Driving me crazy.
Here is a fiddle demonstrating the problem. See the comments for instructions to reproduce.
NOTE: I used current latest version (AngularJS 1.2.6) to investigate your issue.
I found there is a "blockTransitions" function being called internally, which does just that: it blocks transitions.
https://github.com/angular/angular.js/blob/master/src/ngAnimate/animate.js#L1099
If you comment the line linked above (the single line of the "blockTransitions" function body), the problem is solved.
As I can't tell if this is a proper solution (and probably it is not), I've just created a PR so they can properly resolve the issue:
https://github.com/angular/angular.js/pull/5552
Also using latest version, there is a workaround: http://jsfiddle.net/2fnhr/3/
app.config(function($animateProvider){
$animateProvider.classNameFilter(/^((?!col-md).)*$/);
});
This will only apply the ngAnimate stuff for classes which does not contain "col-md" on its name, thus turning off the ngAnimate for the Bootstrap classes in question.
Explanation of the regular expression here: https://stackoverflow.com/a/406408/370290
I need to add Twitter's Bootstrap styles to existing GWT component...
I found more than one project but all of them creates new custom components for that purpose...
I need to stick with GWT standard components and have my app L&F looks like TBootstrap.
Thanks.
You will have a great job to do overriding GWT's default css. Your starting point may be the Developer's Guide - Client Bundle.
Some widget does not accept Bundles, so you may have too to override GWT css in the bootstrap html file.
I believe that you can hack the basic styles with jQuery or overriding CSS styles, but the responsiveness, topbar and other things, I believe thats is pretty impossible...
You can take a look at GWT-Bootstrap.
Hope it helps..
Does somebody know a little Javascript librabry that will mimic CSS3 transitions for browsers like Firefox 3.6 or IE8?
Example:
-webkit-transition:left 1s ease-in;
I guess such a library is quite hard to develop.
These two support a lot but no CSS3 transitions:
CSSsandpaper
CSSPie
And then we have Modernizr but it only does feature testing.
The great thing about having an extra mini library for CSS3 transitions support is that you don't need to write your own backup code. You could just plug it in and be sure that those transitions work in most browsers.
YOu can try using JQuery animation to mimic the effect, but it still requires some coding. Nothing as simple as CSS3 code for transitions ;(
I was looking for the same library and didn't succeed, so I decided to create it.
Hope that's what you wanted - alevkon / smooth.
Recently I've open sourced a JavaScript library that may help your with your question. It and published under http://transitionjs.org
It allows you to quickly apply CSS transition on elements from JavaScript without editing your CSS. For example, to execute CSS transition you mentioned in your question you would simply write:
transitionjs.begin(element, 'left 0px 100px 1s ease-in');
note: you will need to provide the start and end values of the transition.