why animation can be reusable after im changing elemets display property with js
can some one explain i couldnt find any answer for this
can someone explain me this
my codes downbelow
`
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
aside {
display: none;
position: relative;
left: -100%;
height: 100vh;
background-color: red;
width: 20%;
animation: openit 800ms ease-in forwards ;
}
#keyframes openit {
to{
left: 0;
}
}
aside a {
display: block;
}
.open {
position: absolute;
z-index: -1;
}
</style>
`
I found this:
When we want to use transition for display:none to display:block, transition properties do not work. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable. That is why the transition property does not work.
form this link. I hope this help.
Related
I have been hitting my head against a brickwall with this issue.
I have tried using this line of code to create an underline on hover effect with CSS using Elementor. I've tried it with a button widget and a Text Editor widget but can't seem to get it to work at all. What am I missing?
Any help would be really helpful.
Thanks
:
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: -5px;
background: #000;
height: 4px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
right: 0;
}
Your code almost works - the problem is the transition-property. You have left right which is not legal CSS. And in fact you only want to transition the right property, the underline stays anchored at the left side.
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline::after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: -5px;
background: #000;
height: 4px;
transition-property: right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover::after,
.underline:focus:after,
.underline:active:after {
right: 0;
}
<div class="underline">Hover over me</div>
It can be helpful to run your code through the relvant validator. In this case I used the W3C CSS validator which picked up the error.
Although you can transition (animate) the right property as you have done it is often more performant (in CPU/GPU usage sense) to use transforms such as scale or translate to shrink/grow or move things.
I see an annoying bug happening at the end of the animation loop, where it blinks for a fraction of a second, and makes the animation look choppy.
Here is the pen.
SCSS:
$dim: 60px;
$mult: 1.8;
$color: #bada55;
body, html {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #36a;
}
.circle {
background-color: $color;
border-radius: 50%;
width: $dim;
height: $dim;
position: relative;
}
.circle:before {
content: "";
display: table;
background-color: $color;
border-radius: 50%;
position: absolute;
animation: notification 800ms ease-in infinite;
}
#keyframes notification{
0% {
opacity: 1;
width: $dim;
height: $dim;
left: 0;
top: 0;
}
90% {
opacity: 0;
left: -(($dim * $mult) - $dim)/2;
top: -(($dim * $mult) - $dim)/2;
width: $dim * $mult;
height: $dim * $mult;
}
100% {
opacity: 0;
width: $dim;
height: $dim;
left: 0;
top: 0;
}
}
I've tried adding another frame, but it doesn't really remove it. I also tried hiding the before div afterwards, but doesn't work. Neither with z-index.
Any suggestions?
The problem with the "choppy" behaviour is: You change the dimensions and the positioning of your element. This forces the browser to re-render the element (in this case your :before pseudo-element. This makes the calculation for the browser way harder than it has to be.
Instead of alternating the dimensions, you could use a simple transform. Transforming elements does not force a re-rendering of the element and therefore performs way smoother. Also, it makes the code a bit easier as well. I forked your CodePen and used the transform instead of the dimensions: http://codepen.io/HerrBertling/pen/NbrPJb
It's certainly not perfect concerning the animation and the dimensions, but it should run way smoother.
(Check e.g. this Medium post for further info about the browser's behaviour: https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108#.sykm5uqyv)
I'm trying to build a gallery where every image has a hover effect (this one). When I jhover the image and click the link inside , a bootstrap modal opens showing some content.
Until here works fine, however, when I close this modal, the image is not displaying properly in the main page. You can see my problem here:
http://www.bootply.com/90dGFlCrxI
Can anyone explain me what am I doing wrong?
Thanks very much guys!
The issue seems be the
overflow: hidden;
in this css rule:
.effect figure {
margin: 0;
position: relative;
/*overflow: hidden;*/
text-align: left;
}
if you remove the issue is fixed.
another work around:
.effect figcaption {
position: absolute;
width: 100%;
left: 0;
padding: 7px;
background: #26BC8A;
color: #ed4e6e;
height: 50px;
top: auto;
bottom: 0;
opacity: 0;
/* transform: translateY(100%); */
/* transition: transform 0.4s, opacity 0.1s 0.3s; */
}
the translateY is not working as expected.
I've noticed that transition is not working when the element is also changing from display none to block. Why is that? It works if I remove the display attribute.
CSS:
#box {
width: 150px;
height: 150px;
background: red;
transform: scale(0);
display: none;
transition: transform .5s;
}
#box.active {
transform: scale(1);
display: block;
}
http://jsfiddle.net/640kL55u/
Because it has display: none to begin with, the other styles are not being taken into the dom to be transitioned once display: block is added.
Instead, you can hide the div with height, so its still on the page but not showing. Then add the height on the show div.
JS Fiddle
Any change from or to display: none won't trigger transitions.
You can, however, change the display property and then add the class name at the end of the javascript stack. For instance:
function showElem(elem) {
elem.style.display = "block";
setTimeout(function() {
elem.classList.add("active");
}, 0);
}
And then pass element nodes to this function.
You can't transition with display: none; properties...
$("button").on("click", function() {
$("#box").addClass("active");
});
#box {
width: 0;
height: 0;
overflow: hidden;
background: red;
transform: scale(0);
transition: transform .5s;
}
#box.active {
width: 150px;
height: 150px;
transform: scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="box"></div>
<button>CLICK</button>
I have a div called main content, inside this div is another div called slideup. Using CSS animation, when you hover over the main content div, the slide up div slides up from the bottom to 50% height. This can be seen in my css code below
.maincontentdiv {
position: relative;
height: 100px;
width: 100%;
}
.slideup {
position: absolute;
width: 100%;
bottom: -2px;
min-height: 0;
color: #FFF;
transition: min-height 250ms ease-in;
background-color: #666666;
text-align: center;
height:20px;
}
.maincontentdiv:active > .slideup, .maincontentdiv:hover > .slideup {
min-height: 50%;
}
The hover works perfectly well, however I included the click function (.active) for touchscreen devices. I can not seem to get the click function working. Could somebody please tell me what I have done wrong?
Thanks