Develop Reference

Css animation with display none doesnt work [duplicate]

This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 1 year ago.
I have a screen that includes a button on the left and a picture on the right and soon as I click the button CLICK, I want the image on the left to display none with animation. Later on, another box which was displayed none before, should display block.
function calculate() {
document.getElementById('body-mass-image').classList.add('body-mass-over');
var el = document.getElementById('body-mass-result-box');
if (el) {
el.className += el.className ? '__show' : '__show';
}
}
.calculate__content__result { display: none; }
..calculate__content__result__show { display: block; }
#body-mass-image {
transition: all 1s linear;
display: block;
opacity: 1;
}
#body-mass-image.body-mass-over {
display: none;
transition: opacity 1s ease-out;
opacity: 0;
}
<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
<div class="form-group">
<div class="calorie__button__area">
<button type="submit" class="button-secondary button__calculate" onclick="calculate()">CLICK</button>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content" id="body-mass-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBwAo9q5FtWQKO_hKSmgkKkrMZZtirYph9xg&usqp=CAU" alt="Weight Calculation Image"/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result" id="body-mass-result-box">
<div class="row">
<div class="col-lg-2 col-md-12 col-sm-12"></div>
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="result__box">
<div class="title">Vücut Kitle End.:</div>
<div class="calorie">33.9</div>
<div class="title">Durum:</div>
<div class="calorie">Şişman/Obez</div>
</div>
</div>
<div class="col-lg-2 col-md-12 col-sm-12"></div>
</div>
</div>
So, I display none the image and display block the result__box, but the thing is there i no animation.

If I can understand you clearly, you're trying to make the image disappear slowly using display none on transition which for a very technical reason will never work.
Transition will work perfectly on opacity because opacity has value count down ranging from value 0, 0.1, 0.2, 0.3 till 1.0, so it is possible that within the 1 second you gave, it will translate through those values... But display has no count down, it's either it display or it doesn't
I fear, transition can not work on display, if you want the image to disappear, consider using opacity combine with height and width.
.weight__calculations #body-mass-image {
transition: all 1s linear;
width: // the initial width;
height: //the initial height;
opacity: 1;
}
.weight__calculations #body-mass-image.body-mass-over {
transition: opacity 1s ease-out;
height: 0;
width: 0;
opacity: 0;
}
But if you actually need to use display none, then consider using setTimeout in JavaScript to display the image to none after 1 second, by then your your animation has finished with the opacity.
But again, you're trying to make a result_box appear and image to disappear on click with some transition implementation... Transition should not be used at this situation, but you need animation because transition needs action like "hover" before implementing, but animation implements on it's own... You will have to set up an appear and disappear css for both image and result_box:
example
. result_box_appearance{
opacity: 0;
height:0;
width:0;
animation: 1s linear;
animation-name: result_box_appearance;
}
#keyframes result_box_appearance{
0%{
opacity: 0;
height:0;
width:0;
}
100%{
opacity: 1;
height: 70px;
width: 90px;
}
}
So when you click the button, you can now assign the second className to the result_box.
result_box.className = "result_box result_box_appearance";
and you will have to do the same to disappear for both result_box and image

Instead of using display block, you can use max-height: 0; and to display it use max-height: 999px if this the height is big enough for you.
const button1 = document.getElementById('show');
button1.addEventListener('click', () => {
const image = document.getElementById('image');
const text = document.getElementById('text');
if (image.classList.contains('show')) {
image.classList.remove('show');
text.classList.add('show');
return;
}
image.classList.add('show');
text.classList.remove('show');
});
.block {
overflow: hidden;
height: 100px;
width: 100px;
transition: 0.3s all ease;
opacity: 0;
max-width: 0;
max-height: 0;
}
.block.show {
opacity: 1;
max-width: 100px;
max-height: 100px;
}
img {
max-width: 100%;
}
<button type="button" id="show">
toggle
</button>
<div id="image" class="block show">
<img src="https://www.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" alt="some title" />
</div>
<div id="text" class="block">
some text
</div>

enlarge images with hover on slider bootstrap3 Slide Carousel

I view this code sample to enlarge an image.
I try used it in bootstrap3 Slide Carousel.
I try add 'enlarge' class bootstrap3 slide carousel items.:
<div class="item active">
<div class="item-item col-md-3 col-sm-4">
<a href="#">
<img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive enlarge">
</a>
</div>
</div>
css:
.enlarge {
width: 100%;
float: left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.enlarge:hover {
width: 120%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
cursor: pointer;
}
you can see change here in jsfiddle.
but it can not enlarge.how can I do it?

The issue is that, if you want to increase the width of the image to suppose 120%, the increase will work perfectly fine. But bootstrap.min.css has the following style properties for img element.
CSS:
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Thus you are not able to scale above 100% if you add the class.
.carousel .img-responsive{
max-width:none;
}
It will override the CSS in bootstrap, if you any reason you are not able to view the changes you can add !important, which will override on priority.
.carousel .img-responsive{
max-width:none !important;
}
This will apply to all the images under the carousels.
If you want to specify only for one carousel, you can specify the ID of the carousel, like
#myCarousel .img-responsive{
max-width:none;
}
Here is a working DEMO.
JSFiddle Demo

How to set css3 animation inline or by javascript?

I'd like to set css3 animation effect to multi element, but the animated position was related to the count of elements which is not certain. I had to set css style by js (maybe a mvvm framework).
sample code:
#-webkit-keyframes position {
0% {left:0}
100% {left: 5*elementCounts px;}
}
I found there's no way to set css property by data-*, neither to add inline css3 animation defining inline.
Anybody have idea to resolve this in css or mvvm way?

Two options:
If the number of possible ending positions is small and/or known in advance, you could write a number of variants of your keyframe definition with different names (position10, position20, etc).
If that is not an option, consider setting the element's position with jQuery so you can do all the calculations you need, and only relying on CSS for the animation duration. Here's a fiddle showing how you can achieve that:
JS
$(document).ready(function() {
// calculate the intended location
var div1Position = 100*1;
var div2Position = 100*2;
$('#div1').animate({ left: div1Position });
$('#div2').animate({ left: div2Position });
});
HTML
<div id="parent">
<div id="div1" class="box">Test #1</div>
<div id="div2" class="box">Test #2</div>
</div>
CSS
#parent {
position: relative;
}
.box {
background-color: grey;
color: red;
position: absolute;
display: block;
height: 75px;
width: 75px;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
Hope this helps!

Fade in a non-text element during mouse over

I'm trying to fade in an element on my page that is some text formatted with CSS. I can get a plain text element to fade in using element.fadeIn(). But that doesn't work with my document's current element. The onMouseOver and onMouseOut events are correctly just showing and hiding the element with no fade. I'm trying to get it to fade in (and eventually fade out) with the mouse events.
The first part of the <body>:
<body>
<div class="content">
<h1 class="title">Application</h1>
<ul id="sdt_menu" class="sdt_menu" >
<li onMouseOver="change_it('sub2');" onMouseOut="change_back('sub2');">
<a href="../app.exe">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">APPName</span>
<span class="sdt_descr">Click to Install</span>
</span>
</a>
Function for trying to fade in the text:
function change_it(id)
{
setVisibility(id, 'inline');
//id.FadeIn("slow");
// $('div.detail').fadeIn('fast');
}
Function to setting the visibility:
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
The "sub2" element:
<div class ="detail" id="sub2">
<p><b>Welcome my application!</b></p>
<p>Here is a bunch of text I want to fade in during a mouse over another element!
</p>
</div>
From the CSS file:
.detail{
position: fixed;
top: 0;
left: 35%;
width: 650px;
height: 300px;
Line-height: 1.4em;
color : white;
}
Can someone spot the problem or suggest what I need to do to fade in the "sub2" element during that mouse over action?

Since you didn't answer my question about display vs visibility, I'll assume you want it to take up space (example):
css:
.fade-in
{
opacity: 0;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
.fade {
opacity: 1;
}
jquery:
$(document).ready(function()
{
$('.fadeIn').on('click', function()
{
var target = $(this).data('target');
$(target).toggleClass('fade');
});
});
html:
Click me!
<div id="theId" class="fade-in">You clicked on Click me!</div>
<div>Hi!</div>
JsFiddle Example

jQuery: Is it possible to use slideUp and append text at the same time?

When a user mouses over a picture, I want to slideUp a description, so that new text will appear. When the user mouses out, the description will slideDown.
This is what I've tried so far:
$pic1.hover(function () {
var text1 = $("<div>Price1:$100</div>").hide();
text1.appendTo($('.this')).slideUp("slow");
},function () {
$(this).slideDown();
}
);
Unfortunately, this doesn't work. I googled around, but couldn't find anything. Is it possible to use slideUp and slideDown to show and hide the text?

A better approach would be to use CSS transitions. They're lightweight and easy to do. You can read the specification on transitions here. Here is a quick guide on the matter.
fiddle
HTML
<div class="imageDiv">
<img src="http://placekitten.com/g/200/300" />
<div class="imageDescription">
What a lovely kitty kat!
</div>
</div>
CSS
.imageDiv {
display: block;
float: left;
overflow: hidden;
position: relative;
width: 200px;
}
.imageDescription {
-webkit-transition: top 0.5s ease;
-moz-transition: top 0.5s ease;
-ms-transition: top 0.5s ease;
-o-transition: top 0.5s ease;
transition: top 0.5s ease;
background: rgba(0, 0, 0, 0.4);
color: #f7f7f7;
left: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 100%;
width: 100%;
}
.imageDiv:hover .imageDescription {
display: block;
top: 93%;
}
There a few key things that make this work. First, a CSS transition is used. Transitions are written in the following form:
transition: [property] [duration] [timing-function] [delay];
As can be seen in the example above, I used a transition that targeted the top attribute. I gave it a 0.5s duration and an ease effect. However, this alone wouldn't produce the effect, as the description would just sit below the image and move up on hover. We don't want to see the description until the user hovers over the image!
To address this, you need to add overflow: hidden; to the parent div.imageDiv. This hides the image description, until the transition, when it will be slide up, causing it to no longer overflow.

http://jsfiddle.net/qvbgb/3/
HTML
<div class="imgcontainer">
<div class="image">
<img src="link.jpg" />
</div>
<div class="text">
<h3>Product name</h3>
<p>Description</p>
</div>
</div>
Jquery
$(document).ready(function(){
$('.text').hide();
$('.container').hover(
function () {
$(this).find('.image').slideUp();
$(this).find('.text').slideDown();
},function () {
$(this).find('.text').slideUp();
$(this).find('.image').slideDown();
}
);
})
CSS
.container{
min-width : 150px;
min-height : 150px;
width : 150px;
height : 150px;
cursor : pointer;
display : block;
}
.image img{
width : 150px;
height : 150px;
}

slideUp() will only hide an element, and slideDown() will only show an element. If you want to show an element with slideUp effect or hide with slideDown effect, you have to explicitly call it:
$(text1).show("slide", { direction: "up" }, 1000);
$(text1).hide("slide", { direction: "down" }, 1000);