Is there an easy way to add transition: 1s all to all the classes in my CSS file without having to add it to each one manually?
I was hoping i could just add it to the body and that would affect everything but it doesnt.
Thank you
Use the following syntax to apply css to all elements
* {
transition: 1s all
}
Related
I use the following CSS to animate the change in background color for a div:
#availability-button.red-add, #availability-button.red-remove, #availability-button.green-add, #availability-button.green-remove{
transition: background-color 2000ms linear;
}
#availability-button.red, #availability-button.red-add, #availability-button.red-add-active{
background-color: #c21807;
}
#availability-button.green, #availability-button.green-add, #availability-button.green-add-active{
background-color: #68af28;
}
The above works only one way - when you transition from green to red.
What is causing this?
Fiddle
You only need #availability-button.red and #availability-button.green. The animation life-cycle classes like red-add and red-remove are useful if you're using animations, but for transitions can be tricky since you're just transitioning the change in properties between selectors.
In this case, it seems like multiple selectors are matched in the red-* and green-* groups, which causes undefined behavior in how the transition is completed.
Updated Fiddle
I try when click in button , will toggle class transition of
Here is my code
function linkFc(scope,element,attr) {
var toggle =angular.element(document.querySelector('.fa-bars'));
toggle.on('click',function(){
element.toggleClass('toggle');
})
}
Here is my plnkr
https://plnkr.co/edit/1403TdWErBAzrdbszkGo?p=preview
Where is my wrong ? Please help me
Assuming you want the width of the nav menu to transition back to 300px when you click the hamburger, you need to mover you transition rule to the base sate CSS block, you currently have it in the .toggle .nav-side-menu block, which is only applied when the parent element has the .toggle class.
Move the transition: all 1s ease; rule to the .nav-side-menu block to achieve the desired effect.
On another note, please read some articles about code quality and formatting. Your code is very messy, which will make it harder for others (and yourself) to read and maintain in the future.
IMHO there are 3 possible ways to declare an animation for certain HTML elements on the page:
* { transition: all .3s ease; } - Regarding lines of code, file size, and ease of use, I find this the most suiting solution to handle CSS animations on a page. But I do know using the asterisk selector has quite a heavy impact on performance, so this option doesn't seem like the most efficient one. Also, this sometimes causes for unwanted animations on objects where it's not needed.
.animated { transition: all .3 ease; } - Again regarding lines of code, file size and ease of use (in CSS), this looks like the optimal solution. We create a class specifically for animations, and just add this class to all elements we need an animation on. Variations can be made (adjusting the speed etc.) with other classes. But, this does require that every single HTML element you would like to animate should get this class, which means that when for some reason the classname changes one day, all these references should be updated.
.class1, .class2, .class3, ... { transition: all .3s ease; } - Another solution to this problem could be to have one giant selector for every HTML element in need of animation. This could be causing a giant CSS selector, which is not very file size friendly, nor very readable IMO. But, it does have some advantages too - there's only one place to be updated whenever an element needs animation.
So my question is:
What is the most efficient way to handle CSS animations on a HTML page?
so this is just a sample of what I am trying to do. I want to use Angularjs to animate the opacity of the element on hover but I can't get it to do anything. I have been reading the documentation but I can't seem to figure out what is wrong. Any help is appreciated. See example below.
http://jsbin.com/AdIXIKU/1/edit
Thank you in advance
You do not need to use angular if you want transitions on hover:
.reveal-animation {
// add the vendor prefixed versions as well
transition: all 1s;
}
.reveal-animation:hover {
opacity: 0.5;
}
Should be sufficient.
If you want to animate the entering and leaving of elements, you'll need to use some more angular constructs to ensure that elements do enter and leave like this: http://jsbin.com/iwudOjAW/1/edit (contains both hover and enter/leave effects).
I have used the ng-route module and made the ng-view element enter and leave by changing the hash of the URL.
I was reading about Impress.js and I have some questions about the code below (Part of the Inpress's demo).
.impress-enabled .step {
margin: 0;
opacity: 0.3;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.impress-enabled .step.active { opacity: 1 }
My questions:
What is .impress-enabled class here for?
So class .active is applied on the step currently displayed? And thus, its opacity changes to 1 when its displayed and back to .3 when its next one is displayed; as described in .impress-enabled .step above it, right?
Thanks for help
if javascript is deactivated by the visitors browser, he won't get a .impress-enabled class at all, because it is added via javascript. that's how they could separate a javascript and a non-javascript version (simply deactivate javascript for a moment and visit an example page of impress.js again). So if you have js activated, the class "bored" gets removed and a class called "impress-on-bored" and "impress-enabled" gets activated.
Yes. You're right.
impress-on-ID can be used to add slide specific js or css code when it becomes active. For example, if your slides are small and multiple slides are contained in the browser window, we can initially hide all the slides other than first slide.
Once specific slide becomes active, it will get impress-on-ID class. We can use this class to make the step visible.
If you want to know more, read my book on Building Impressive Presentations with impress.js