I have a list of elements, which when hovered over show a set of controls to remove them. The controls transition in with opacity values.
.duplicate-controls {
position: relative;
float: left;
opacity: 0;
transition: opacity linear 0.7s; }
.duplicate-group:hover .duplicate-controls {
opacity: 1;
transition: opacity linear 0.7s; }
When I'm animating the content, it'll skip or interrupt the animation in a jarring fashion. If I remove the opacity transitions, i can't reproduce the issue.
Please see the following gif for a visual representation of what i'm talking about.
This is it interrupting.
http://gfycat.com/IncomparableBlaringAsianporcupine
This is how it should animate.
http://gfycat.com/CheapMajesticBluebottlejellyfish
Remove the transition property from
.duplicate-group:hover .duplicate-controls{}
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()
How to create this kind of css animation where element fades in from the bottom but appears like clipped with overflow:
http://fr.creasenso.com/ (see the breadcrumb text)
I've tried all the basics but not going anywhere with translateY. Do I need to go to libraries or is it achievable with css only?
The wording of your question could use some improvement. But besides that, I think this is what you are looking for:
https://jsfiddle.net/5ws33c8s/
You need a parent element which has a overflow: hidden. Followed by the childs which are moved out using translate: translateY().
I then used css keyframes to move it back in:
animation: fadeInText 300ms 0ms forwards;
#keyframes fadeInText {
from {
transform: translateY(30px);
opacity: 0;
} to {
transform: translateY(0);
opacity: 1;
}
}
This animation is set up as follows; fadeInText is the keyframes name, 300ms is the duration of the animation, 0ms is the delay of said animation and forwards remembers the final state of the animation, and leaves the element as such. Without it, the element would jump back to its original values.
I then used a delay on each child element.
span:nth-child(2) {
animation-delay: 150ms;
}
I have the following situation: I have an element .animated-container which is invisible by default. When it gets an additional .is-visible class the element fades in with a slight move from the top. That is fine so far. Now my problem is, that the exit animation should be without the slight move back to the top which currently leads to a jump of my element.
The enter transition looks like this:
.is-visible {
transition: opacity .2s, margin-top .4s;
opacity: 1;
visibility: visible;
margin-top: 0;
}
and the exit transition like this:
.animated-container {
/* ... */
transition: opacity .2s, visibility .2s;
margin-top: -60px;
opacity: 0;
visibility: hidden;
}
Having my code like this makes my element jump since margin-top is not animated when removing the .is-visible class.
See my current code here
Thank you so much for every upcoming answer!
Just add a margin-top transition with a delay that lasts the duration of the other animations..
This way it will wait for the other transitions to finish and then try the margin-top (which you do not care about since it will already be invisible.)
.animated-container{
/*...*/
transition: opacity .2s, visibility .2s, margin-top 0s .2s;
}
Demo at http://codepen.io/gpetrioli/pen/xbbavJ
I'm showing and hiding elements with a fade in / fade out effect.
CSS
.element {
opacity: 1.0;
transition: opacity 0.3s linear;
}
.element.hidden {
opacity: 0.0;
}
JS
// hide
$('someElement').addClassName('hidden');
// show
$('someElement').removeClassName('hidden');
The problem with this is that an invisible element still occupies space. If the user tries to click something beneath it, this invisible element intercepts the click and the user gets confused. Is there a CSS property that will make the element non-interactable? I'm aware there are some hacks like setting top:-999em in the .hidden class, but I'm asking if you know any elegant solutions.
You will need to transition visibility as well:
.element {
opacity: 1.0;
visibility: visible;
transition: opacity 0.3s linear, visibility 0.3s linear;
}
.element.hidden {
opacity: 0.0;
visibility: hidden;
}
An element with visibility: hidden can be clicked through; i.e. it won't intercept the click.
If you need the element to disappear altogether rather than continue to occupy space, you need to use display: none instead, but that is not an animatable property so you'll see the element disappear abruptly rather than fade out.
Please advise if i'm confused but is there any point of having a transition on visibility? Opacity creates a neat effect, sure. But the change none to block will be from nada to full immediately. Maybe we can spread its occurrence sometime in a time interval but the transition will happen all at once. Or am i mistaken?
Here's the code i'm creating. Should i keep the last three lines in the first style?
div.contentItem{
border: 2px solid #00bb00;
border-radius: 20px;
background-color: Beige;
padding: 10px;
-webkit-transition: visibility 3.0s, opacity 3.0s;
-moz-transition: visibility 3.0s, opacity 3.0s;
-o-transition: visibility 3.0s, opacity 3.0s;
}
div.contentItemHidden{
opacity: 0;
}
div.contentItemVisible{
opacity: 1;
}
Before, i had block styles in the two last clauses but that actually damaged the transition of the opacity (probably due to the fact that display: none causes the elements not to be opacitable at all).
div.contentItemHidden{
display: none;
opacity: 0;
}
div.contentItemVisible{
display: block;
opacity: 1;
}
Yes, there is a point to having a transition on visibility. If you just use opacity on an element, that element will still be there and will block clicks and hover effects on whatever is below it. With visibility: hidden, the element will no longer be visible (similar to opacity: 0), but cannot be clicked.
Here is a link that helps to explain in more detail why using visibility and opacity together may be necessary, and how to do so correctly: http://www.greywyvern.com/?post=337
As a side note, I noticed that you mention visibility in your question, but have display in your code. I'd like to note that there is a difference between visibility and display. In particular, elements visibility: hidden are not visible but still take up space. Elements with display: none are not visible but do not take up space.