when I include ng-show display property of css comes into effect but I want to change opacity property.
In the documentation of angular it is written defining your own custom css using important will override the effect but it is not working.
<p ng-show="registrationForm.firstname.$invalid" class="help-block colorred">Enter only alphabets</p>
<style>
.help-block.ng-show{ opacity:1 !important;}
.help-block.ng-hide{opacity:0 !important;}
I am new to angular.js.
Any kind of link or suggestion would be helpful
It is important to note that the animations are applied to the state of either ng-show or ng-hide, e.g. whether an element with ng-hide is currently hidden (resolves to true) or not (resolves to false), the same for an element with ng-show.
So, for an element with ng-hide, change your CSS to:
.help-block.ng-hide-add, .help-block.ng-hide-remove {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
display:block!important;
}
.help-block.ng-hide-add.ng-hide-add-active,
.help-block.ng-hide-remove {
opacity:0;
}
.help-block.ng-hide-add,
.help-block.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}
I had the same problem; ng-hide push a display none. It is possible to put a display on the css class ng-hide.
.help-block.ng-hide {
opacity: 0;
display:block !important;
}
About !important, there is in documentation :
By using !important, the show and hide behavior will work as expected despite any clash between CSS selector specificity.
Related
I have a less file that hide and display an element like the following:
.cmp-accordion__panel {
&--hidden {
display: none;
}
&--expanded {
display: block;
-webkit-animation: slide-down 0.5s ease-out;
-moz-animation: slide-down 0.5s ease-out;
}
}
#-webkit-keyframes slide-down {
0% {
opacity: 0;
-webkit-transform: translateY(-5%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#-moz-keyframes slide-down {
0% {
opacity: 0;
-moz-transform: translateY(-5%);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
In my JavaScript, I toggle the class name of the element between "cmp-accordion__panel--hidden" and "cmp-accordion__panel--expanded" if the event is triggered. I use keyframe and opacity to animate the transition from "display:none" to "display:block".
However, when I go from "display:block" to "display:none" to hide the element, the effect happens INSTANTLY. What should I add to animate the hiding?
As already said, is not possible animate or transition from display:block; to display: none; but this could be simulated in another way and is not necessary to use CSS animations, simply CSS transitions (in addition, is not necessary anymore to use vendor-prefixes to declare transitions or animations).
Please, look at this working example:
HTML (I inserted a fake content to create an element with a relative big height)
<div class="cmp-accordion__panel--expanded">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
LESS
[class*="cmp-accordion__panel"] {
border:solid 1px red;
overflow:hidden;
transition:opacity 0.3s ease-out, max-height 0.8s ease-out;
}
.cmp-accordion__panel {
&--hidden {
max-height:0;
opacity:0;
}
&--expanded {
opacity:1;
max-height:1000px;
}
}
Please note that, thanks to attribute partial value selector I added also some rules that apply to both *--hidden and *--expanded classes (I personally prefer a general class and an addition of a second one in some cases, instead of switching between two, but I did not want to change too much your approach).
The key rule is switching between two values of max-height property, from a 0 value to another "enough big" one. If you effectively know final height of the element you can simply use also height property, but in case of dynamic content, max-height did the trick.
Please note also the presence of overflow:hidden; applied to both classes, to simulate height changes.
Finally, animation effect relies only on a CSS transition applied to opacity and max-height properties, with different timings to enhance effect.
You cannot animate or transition from display: block; to display: none;, so you will need to remove this if you wish to animate it.
To ensure it fades and is removed you should animate the visibilty and opacity attributes.
Alternatively if you are using jQuery you can use the .fadeOut() function.
MDN - CSS Visibility
jQuery - fadeOut()
The CSS transition property lets you animate on both hover-in & hover-out if you put the transition as below:
#inner{
opacity:0;
transition:opacity 2000ms;
}
#outer:hover #inner{
opacity:1;
}
However, if the transition is moved to :hover state, it only happens on hover-in.
#inner{
opacity:0;
}
#outer:hover #inner{
opacity:1;
transition:opacity 2000ms;
}
Is it possible to do the reverse, i.e. animate on hover-out only?
Here's one way to achieve this (put a bogus property none for transition property in :hover):
#inner2{
opacity:0;
transition:opacity 2000ms;
}
#outer:hover #inner2{
opacity:1;
transition:none;
}
http://jsfiddle.net/j716sbav/4/
Answer updated to incorporate #BoltClock's suggestion. Putting none instead of a bogus property is definitely more elegant.
If you prefer not to specify the transition property more than once, you can apply the transition to :not(:hover), but the caveat is that you need to swap all of the other declarations as well:
#inner2{
opacity:1;
}
#outer:not(:hover) #inner2{
opacity:0;
transition:opacity 2000ms;
}
Either of these will work, but if you don't want to deal with confusing inversions, stick with overriding via transition: none.
Also note that CSS selectors represent states and not events, which means that it utilizes a :hover state rather than mouseover and mouseout events; however, a transition from :hover to :not(:hover) is essentially the CSS way of expressing a mouseout animation.
I know this is a very old post but, as it came up in response to my Google search on the subject, I thought I'd post my solution.
After reading everything posted here, I found the simplest solution. Place a transition on the initial state as follows:
.btn {
opacity:0;
transition:0.6s;
}
.btn:hover {
opacity:1;
transition:0.8s;
}
So it has a transition time to the hover state and a transition time to the non-hover (ie normal) state. Saves a whole bunch of code.
I have the following CSS example:
.message{
background-color: red;
transition: background-color 5s;
-webkit-transition: background-color 5s; /* Safari */
transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */
}
.unreadMessage{
background-color: blue;
}
Then, i have a DIV with .message class, and by pressing a Button, i add the class .unreadMessage, and by pressing another Button, i remove it.
With this example, every time i change background-color, by adding or removing .unreadMessage, it does the CSS transition.
What i want to do, is, if possible, to have an instant color change when i add .unreadMessage, and have the transition only when removing it.
The first thing that come in my mind, was to have a different class containing the CSS transition properties, and add it after adding .unreadMessage.
But it is possible to do it with only one class, or using a Javascript workaround?
If you want to only apply a transition when the .message element does not have the unreadMessage class, then put the transition properties in the .message:not(.unreadMessage) selector:
.message{
background-color: red;
}
.message:not(.unreadMessage) {
-webkit-transition: background-color 5s; /* Safari */
transition: background-color 5s;
-webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;
}
.unreadMessage{
background-color: blue;
}
Demo: http://jsfiddle.net/Hs8fa/
Documentation for :not()
There are two things to remember when using CSS transitions:
Transitions happen when an element's state is modified "using pseudo-classes like :hover or :active or dynamically set using JavaScript."
You have to have a starting point and an ending point or they won't work.
The biggest issue with OP's question isn't their CSS, it's their naming structure. A major pattern of CSS transitions is to modify an element's class (or in the MDN's language "dynamically set using Javascript"). In OP's example they're not modifying an element's class structure, they're changing classes. CSS transitions won't work when an element changes from one class to another, but they will work when a class is added or taken away.
The easiest example of this is going from .element to .element.active. If we put the transition on the base class, .element, and then add a modifying class, .active, the transitions applied to .element will transition from .element settings to .element.active. settings.
Here's a JSFiddle example of modifying a base class
Secondly, and this is one I forget all the time, the base class must have a starting style. I can't transition left in the modified state if I don't have left set in the base state.
This code snippet contains a div with transition: none;
On click, override transition property by adding a new class add-transition
On the second click, the same class is removed & no transition.
var elm = document.querySelector('.no-transition');
elm.onclick = () => (
elm.classList.toggle('add-transition')
);
.no-transition {
background-color: aliceblue;
transition: none;
}
.add-transition {
background-color: deepskyblue;
transition: background-color 3s;
}
/* Note: As like other any other CSS property
Specificity or CSS Order can make the difference.
Styles below are for code the snippet to look better. */
.wrapper {
padding: 20px;
margin: 20px;
text-align: center;
cursor: pointer;
border: 1px solid lightgray;
}
<div class="wrapper no-transition">
Run code snippet & click here !!!<hr/>
on load, No transition. <br/>
on click, transition added(bg color). <br/>
on second click, no transtion.
</div>
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I am working on new website and I got question.
Should I change style using class or javascript code, for example:
the class way:
$('.class').hover(function()
{
$(this).addClass('nameofclass');
},function()
{
$(this).removeClass('nameofclass');
}
the javascript way:
$('.class').hover(function()
{
$(this).css('property','value');
},function()
{
$(this).css('property','value');
}
same question about animate, but in order to use class in animate, I need to use plugin. should I use plugin to allow class animation?
Change the class, then the style is set in the CSS, and the behaviour is in the JS.
This also has the advantage that you can use CSS transitions in browsers that support them, while using animate in old ones, by adding the transition property where needed, then using css instead of animate in jQuery in new browsers.
For instance, say you want to fade out a div:
CSS
.fade {
opacity:0;
}
.box {
width:100px;
height:100px;
background-color:red;
-webkit-transition:all ease-in-out 0.6s;
-moz-transition:all ease-in-out 0.6s;
-ms-transition:all ease-in-out 0.6s;
-o-transition:all ease-in-out 0.6s;
transition:all ease-in-out 0.6s;
}
HTML
<div class="box"></div>
Your javascript can then look like this:
JS
$(document).ready(function() {
$(".box").click(function(){
$(this).toggleClass("fade");
});
});
In non transition browsers, you just won't get a fade. To add that, you can use animate to animate to the properties.
For more info on transitions, have a look at http://css3.bradshawenterprises.com/.
As far as I understand, there is no such thing we can implement using css transitions, but we can not to implement using css animations, but not vice versa.
That is, any transition has a css animation equivalent.
For example, this one
.ablock:hover {
position: relative;
-moz-transition-property: background-color, color;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
color: red;
background-color:pink;
}
is an equivalent of following:
.ablock:hover {
-moz-animation-duration:1s;
-moz-animation-name:transition;
-webkit-animation-duration:1s;
-webkit-animation-name:transition;
}
#-moz-keyframes transition {
to {
color: red;
background-color: pink;
}
}
#-webkit-keyframes transition {
to {
color: red;
background-color: pink;
}
}
My question is - if we a talking about browser supporting both css transitions and animations, what are use cases for choosing one or another approach?
As for transitions, I can name only one - they have more succinct syntax, we don't have to copy paste huge chucks of code for #-moz-keyframes, #-webkit-keyframes and so on.
As for control from javascript, flexibility and complexity animations are much more appropriate tool (at least, at first glance). So, what are use cases?
UPD:
OK, let me try to list interesting info found in questions.
This one is contributed by Roman Komarov. Say, we have a div and child div. While parent div is hovered, we are transitioning the child element. Once we are taking away the mouse, transition is cancelled. Duration of this cancellation is exactly the time we've already spend for transitioning. Animation is cancelled "immediately". I don't know, nevertheless, how standard are those two behaviours.
Animations can be looped (and there can be keyframes, yeeah).
Transitions can be more flexible and you can easily make transitions to different values and in different circumstances.
While you can emulate some transitions by animations (like you mentioned in your post), the transitions are just more powerful:
You just tell which properties you must animate and in which conditions (using the different selectors)
You can trigger the transition in different ways:
Changing properties in CSS for pseudo-classed :hover, :active etc. (Creating pure CSS UI)
Changing properties in different classes for different purposes.
Changing properties in inline styles: in conjunction with JS it's just more powerful than animations.
With transitions you are able to transition between any value of the defined property, which you want to be transitioned. As an example, you want to transition the color of a link, when it's hovered and active:
a {
color: #000;
transition: color .4s ease;
}
a:hover {
color: #888;
}
a:active {
color: #faa;
}
You are independent, which color you choose.
Now if you want to use the animation style, you have to explicitly set the color value for the animation states. And you are not able to easily animate between the three states: normal, hover and active. You need more complex definitions. I'll try this one with animations:
a {
color: #000;
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-name: toDefault;
}
a:hover {
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-name: toHover;
}
a:active {
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-name: toActive;
}
#keyframes toDefault {
to {
color: #000;
}
}
#keyframes toHover {
to {
color: #888;
}
}
#keyframes toActive {
to {
color: #faa;
}
}
Now this does not include the animation back to the state before. I'm not sure if you can even fetch that.
So in short: with transitions you are able to animate an undefined set of properties and values, whilst keyframe animations are used for well defined animations and/or transitions.