Today I was having a hard time to find out a bug and then it turns out that one of my animation name was the exactly same with a bootstrap animation and it was overriding it.
So, in my example I've defined
#keyframes fadeIn {
// something different than bootstrap one
}
Since fadeIn was already defined in bootstrap this definition was overriding that. So, I thought it would be cool if we can define animations in 'local scope' or so but I couldn't find any results on web. Is there a thing like that or does anyone have any suggestion about what can be done while naming animations to be on the secure side?
Related
Looking at this site: https://css-tricks.com/svg-line-animation-works/
I found this
I am now at a loss how to try to change the same property (stroke-dashoffset) using the web animation api WAAPI, anyone have any clue or where I should be searching for this information?
I cannot find out what keywords to use in my keyframes, or what is valid things to write in there even
I missed the small but important print in the keyframe specification, change the property name from stroke-dashoffset to strokeDashoffset and it will work the same
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.
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 came across #keyframes somewhere in css3 codes. I couldn't find about it in much detail in stackoverflow. Even this question answers the # rules except #keyframes.
Can somebody explain or provide a good link about #keyframes in detail?
Thanks in advance.
Have a read of: http://css3.bradshawenterprises.com/animations/
They just set the parameters for different stages of an animation, this lets you perform complex animations using CSS.
The #keyframes at-rule is intended to define a CSS3 animation and usually has vendor prefixes in the real CSS code, since the standardization/implementation dust hasn't settled down yet. You can find more about WebKit's implementation (#-webkit-keyframes) from their blog post... or about the general stuff here.
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.