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>
Related
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.
The following hides the element, but I cannot recover when I hover over it.
I've checked devtools to see that it is indeed rendered on the screen, I just can't see the contents of the div.
How do I make it so the div is visible only on hover?
.visible-on-hover {
visibility: hidden;
}
.visible-on-hover:hover {
visibility: visible !important;
}
Elements with visibility: hidden; don't receive any mouse events, so :hover never triggers on such an element.
Instead of visibility, you can work with opacity:
div {
background-color: orange;
height: 200px;
width: 400px;
padding: 50px;
}
.visible-on-hover {
opacity: 0;
transition: opacity .3s ease;
}
.visible-on-hover:hover {
opacity: 1;
}
<div class="visible-on-hover">visible only on hover</div>
you can not hover, focus or select a hidden element.
you can use opacity
.visible-on-hover {
opacity: 0;
}
.visible-on-hover:hover {
opacity: 1;
}
How do you make the card to transform back to the front card when you click on the return arrow left icon at the back of this card both on mobile and desktop device. https://jsfiddle.net/86pkrs4v/. I tried using the ff breakpoints but it won't transform. I still wan't the hover to be applied in desktop and on mobile you can click anywhere of the front card to apply the transform styling.
#media (min-width:1025px) {
.more {
display: none;
}
.card:hover .content {
transform: rotateY(180deg);
}
}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 1024px) {
.more {
display: none;
}
.more:checked ~ .content {
transform: rotateY(180deg) !important;
}
.card:hover .content {
transform: rotateY(180deg) !important;
}
}
you can add the following javascript:
$(".card").click(function(e){
$(".card").addClass("myclass");
});
$(".card").mouseout(function(e){
$(".card").removeClass("myclass");
})
and the class in css:
.myclass .content{
transform: rotateY(0deg)!important;
}
in this example you can click anywhere on the card to make the rotation back to 0 degrees, but you can change it to
$(".button").click(function(e){ ...
if you only want the arrow to be clickable.
This is your solution if you want then you can put some contents as per your requirement inside the card
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
.scene {
width: 200px;
height: 260px;
margin: 40px 0;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
edit or preview Here on JSFiddle
If I understand, clicking on arrow you want it to behave same as when you remove mouse away from <div class="content">.
If so, there are two things:
make it transform: rotateY(0deg), not 180 since it is already rotated for 180 degrees and we want it to turn back.
Clean it up for hover to work and let css work as before.
I think, the simplest solution is
let backArrowLeft = document.querySelector(".button.return");
let flipContent = document.querySelector(".content");
backArrowLeft.addEventListener("click", function() {
flipContent.style = "transform: rotateY(0deg);";
});
flipContent.addEventListener("mouseout", function() {
this.style = "";
});
To make it easier to maintain, you can create class and add/remove it on those two events, similar to Joachim's answer, I just post it since I've seen on fiddle that you don't use jQuery.
Let's mark the discover button first:
<label for="card1" class="button discover" aria-hidden="true">
Discover
</label>
You can add the following in the javascript. Note that a click on mobile will also activate the hover trigger, so we don't just want to toggle based on a click on the button:
$(".return").click(function(e){
$(".card").addClass("turned");
});
$(".discover").click(function(e){
$(".card").removeClass("turned");
});
Then, replace in the CSS the transformation:
.card:not(.turned):hover .content {
transform: rotateY(180deg);
}
.card.turned .content {
transform: rotateY(180deg);
}
.card.turned:hover .content {
transform: rotateY(0deg);
}
I'm having trouble handling the "transitionend" event in Microsoft Edge, on a pseudo element.
It works in other browsers like chrome, safari, and firefox. I thought it may have been a bug with MS Edge, but it doesn't work in IE11 either, so maybe there is some other way that I'm missing in the Microsoft world.
Does anyone know how to handle this in IE?
Here's the code... the box will turn green after the fade-in completes if the transitionend event has been handled correctly.
window.setTimeout(function(){
$('#box').one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd',function(){
$(this).addClass('done');
});
$('#box').addClass('show');
},1);
#box {
position: relative;
}
#box:before {
position: absolute;
height: 100px;
width: 100px;
background-color: tomato;
transition: opacity 1s;
opacity: 0;
content: "";
}
#box.show:before {
opacity: 1;
}
#box.done:before {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="box"></div>
#box {
position: relative;
}
#box > .before {
position: absolute;
height: 100px;
width: 100px;
background-color: tomato;
transition: opacity 1s;
opacity: 0;
content: "";
}
#box.show > .before {
opacity: 1;
}
#box.done > .before {
background-color: green;
}
IE11 has an issue with transitionend on pseudo element. If added extra elements inside the parent container. This worked for me!
Is you used jQuery's .animate() function, you can have a function put on the end to be run, like this:
$(document).ready(function() {
$('#box').animate({opacity: 1}, 1000, function() {
$('#box').animate({background-color: green}, 1000);
});
});
The background-color will only transition to green after it has finished fading in. Hopefully this helps!
I have an inner and outer div. When the outer div changes from display: none to display: block, the inner div is supposed to transition from opacity 0 to opacity 1. This doesn't work however, the inner div just immediately goes to opacity 1. Any ideas why? Fiddle below -
http://jsfiddle.net/bradjohnwoods/umureqvq/
<div id="outer" class="hide">
<div id="inner" class="hide">
</div>
</div>
<button type="button">press</button>
div#outer{
height: 200px;
width: 200px;
background-color: tomato;
}
div#inner{
height: 100px;
width: 100px;
background-color: lightgrey;
opacity: 1;
transition: all 1000ms;
}
div#outer.hide{
display: none;
}
div#inner.hide{
opacity: 0;
}
var outer = $('#outer');
var inner = $('#inner');
var btn = $('button');
btn.click(function(event){
outer.removeClass('hide')
inner.removeClass('hide');
});
I think it's attempting the fade at the same time it's changing to be visible, so technically it's not visible yet. Therefore it's not doing the transition. Setting a timeout forces it to first be visible, then handle the opacity.
http://jsfiddle.net/umureqvq/6/
var outer = $('#outer');
var inner = $('#inner');
var btn = $('button');
btn.click(function (event) {
outer.removeClass('hide');
setTimeout(function () {
inner.removeClass('hide');
}, 0);
});
It has to do with the outer div's display property. You can set its width and height to 0 instead. It has the same effect but allows the inner div to transition.
Updated JSFiddle
CSS
div#outer{
height: 200px;
width: 200px;
background-color: tomato;
overflow: hidden;
}
div#inner{
height: 100px;
width: 100px;
background-color: lightgrey;
opacity: 1;
transition: all 1000ms;
}
div#outer.hide{
width: 0;
height: 0;
}
div#inner.hide{
opacity: 0;
}
display:none does not work well with transitions. I've used the following instead:
.hide {
display: block;
position: absolute;
top: -9999px;
left: -9999px;
}
In addition to addressing the transition issue, this also leads to a better user experience since the browser:
pre-fetches the resources of the element (eg. images), and
pre-renders the layout of the element
Another solution is to set a 1ms timeOut between the display and the opacity. I think that also is a bit tacky. I'm looking for a better solution, but I guess there is none.