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.
Related
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{}
This is my first question in this forum so if it's not well explained, feel free to ask me for more details.
I have a color transition in all the links on my navbar, that triggers when you hover your mouse over them. This work wells, the problem is that when the website loads, all those elements began to resize or move to their initial positions.
CSS
nav{
height: 80px;
width: 100%;
background-color: rgba(250,250,250,1);
font-size: 13px;
border-bottom: 1px solid #D8D8D8;
color: #6E6E6E;
position: fixed;
margin-top: -80px;
}
nav a{
padding: 20px 20px;
line-height: 80px;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}
nav a:hover{
color:#00BFFF;
}
UPDATE
I have tried to make a JSFiddle with the problem, but even when the CSS and HTML is exactly the same its seem to work correctly on the demo
I have changed the transition property from all to color. This has solved the problem partially, since now the elements don't move when the page loads, but the problem now is that all links that include this color transition, when the website loads, show an initial blue color (inexistent in my CSS) taking the transition time to change to the correct color. This initial blue color is similar to the visited links standard color (but I have also used the selector a:visited without positive result.
This only happens on Firefox.
As due to my low reputation I can't post images, I have taken the blue initial tone: RGB (6,6,231)
You only need animate the color:
-webkit-transition: color 0.8s;
transition: color 0.8s;
note that I change all for color only.
note 2 you can do
transition: color 0.8s, height 0.2s ease-out, opacity 1s linear 0.5s;
Try adding script tag at footer of the html page.This worked for me.
<script> </script>
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 was compiling different methods to achieve click & show with pure CSS and I am not sure if I found a bug in Firefox. The html code is:
<span id="show6" class="show6"></span>
<div id="cont6">Ipsum Lorem</div>
The CSS uses the :active selector to make the div visible when the span is clicked:
#cont6{
display: block;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
font-size: 0;
overflow: hidden;
}
#show6 {cursor:pointer;}
#show6:before { content: "Show"}
#show6:active.show6:before {content: "Hide"}
#show6:active ~ #cont6{
opacity: 1;
font-size: 100%;
height: auto;
}
(You can see it in action in Example number 6 or 8 of this dabblet. Don't pay much attention to the notes, since they are directed at me but don't really explain the examples).
If I understand :active, the effect should occur only while the span is pressed, and the moment it is released the effect should stop, however in Firefox the div keeps visible after releasing the click on the span.
Can you reproduce it or am I doing something wrong?
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.