Mixing
Replacing a containers content with css transition between with unkown height
2
I would like to replace the content of a modal popup dynamically, and it do a smooth transition between the old size and the new size.
I thought I may be able to do this using CSS transition, however I have been unsuccessful so far.
My setup is something similar to the JS fiddle here, where I have a container, and I swap out the inner content with different width and height.
http://jsfiddle.net/Lsf76eby/24/
html
<input type="button" value="press me" onclick="changeDiv()" />
<div id="container">
<div id="a">
</div>
</div>
js
function changeDiv(){
var b = $('<div id="b">');
$('#container').empty().append(b);
}
css
#container{
transition: 2s;
height: auto;
}
#a {
height: 200px;
width: 200px;
background:blue;
}
#b {
height: 400px;
width: 300px;
background:red;
}
javascript jquery html css transition
asked Nov 19 '18 at 16:58
user3284707
5171515
add a comment |
2
I would like to replace the content of a modal popup dynamically, and it do a smooth transition between the old size and the new size.
I thought I may be able to do this using CSS transition, however I have been unsuccessful so far.
My setup is something similar to the JS fiddle here, where I have a container, and I swap out the inner content with different width and height.
http://jsfiddle.net/Lsf76eby/24/
html
<input type="button" value="press me" onclick="changeDiv()" />
<div id="container">
<div id="a">
</div>
</div>
js
function changeDiv(){
var b = $('<div id="b">');
$('#container').empty().append(b);
}
css
#container{
transition: 2s;
height: auto;
}
#a {
height: 200px;
width: 200px;
background:blue;
}
#b {
height: 400px;
width: 300px;
background:red;
}
javascript jquery html css transition
asked Nov 19 '18 at 16:58
user3284707
5171515
add a comment |
2
2
2
I would like to replace the content of a modal popup dynamically, and it do a smooth transition between the old size and the new size.
I thought I may be able to do this using CSS transition, however I have been unsuccessful so far.
My setup is something similar to the JS fiddle here, where I have a container, and I swap out the inner content with different width and height.
http://jsfiddle.net/Lsf76eby/24/
html
<input type="button" value="press me" onclick="changeDiv()" />
<div id="container">
<div id="a">
</div>
</div>
js
function changeDiv(){
var b = $('<div id="b">');
$('#container').empty().append(b);
}
css
#container{
transition: 2s;
height: auto;
}
#a {
height: 200px;
width: 200px;
background:blue;
}
#b {
height: 400px;
width: 300px;
background:red;
}
javascript jquery html css transition
asked Nov 19 '18 at 16:58
user3284707
5171515
I would like to replace the content of a modal popup dynamically, and it do a smooth transition between the old size and the new size.
I thought I may be able to do this using CSS transition, however I have been unsuccessful so far.
My setup is something similar to the JS fiddle here, where I have a container, and I swap out the inner content with different width and height.
http://jsfiddle.net/Lsf76eby/24/
html
<input type="button" value="press me" onclick="changeDiv()" />
<div id="container">
<div id="a">
</div>
</div>
js
function changeDiv(){
var b = $('<div id="b">');
$('#container').empty().append(b);
}
css
#container{
transition: 2s;
height: auto;
}
#a {
height: 200px;
width: 200px;
background:blue;
}
#b {
height: 400px;
width: 300px;
background:red;
}
javascript jquery html css transition
javascript jquery html css transition
asked Nov 19 '18 at 16:58
user3284707
5171515
asked Nov 19 '18 at 16:58
user3284707
5171515
asked Nov 19 '18 at 16:58
user3284707
5171515
asked Nov 19 '18 at 16:58
user3284707
5171515
asked Nov 19 '18 at 16:58
user3284707
5171515
5171515
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
I made a few changes in a fork of the fiddle here. You can read more about this from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
I added a new javascript function, added a css property, and reorganized the css a little
- You must define all the properties you will make subject to the transition using
transition-property
- One significant change is that my javascript function (as adapted from MDN) switches classes on a single div rather than switching the div itself.
Hope this helps!
html
<div id="container">
<div id="target" class="a">
</div>
</div>
javascript
//pretty much straight from the MDN doc...
function updateTransition() {
var el = document.querySelector("div.a");
if (el) {
el.className = "b";
} else {
el = document.querySelector("div.b");
el.className = "a";
}
return el;
}
css
#container{
height: auto;
}
#target{
transition: 2s;
transition-property: width height background-color;
}
.a {
height: 200px;
width: 200px;
background-color:blue;
}
.b {
height: 400px;
width: 300px;
background-color:red;
}
answered Nov 19 '18 at 17:35
Paul Degnan
1,3191922
Thanks so much for your answer. The problem is that I don’t have a class which I am transitioning to - sorry I should have made this more clear. I just have a different size content of a div. in particular I will know the width but not the height. Do you know if there is a way to do this with a auto height container?
– user3284707
Nov 19 '18 at 19:05
This doesn't involve a transition anymore, but there's an easy way to fit the content -- just set a height in px withmin-height, andheight: autojsfiddle.net/w1na6bsf/4 -- Click the "add text" button I added a bunch of times to see what I mean. Apologies if I'm not correctly grasping your intent...
– Paul Degnan
Nov 19 '18 at 19:30
Sorry yes this is kinda how I have it at the moment, I just wanted it to grow or shrink in a nice transition, rather than just jumping to the new size if that makes sense. So if I go from a table with lots of rows to one with only a couple it would transition over say 1 second to the new smaller size.
– user3284707
Nov 19 '18 at 19:38
Perhaps I will have to get the height of the new content and then set this on the div, then I should be able to use the transitions I’m thinking
– user3284707
Nov 19 '18 at 19:39
1
Getting the height of the div and setting this has sorted my problem, thanks very much.
– user3284707
Nov 20 '18 at 16:39
|
show 3 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379382%2freplacing-a-containers-content-with-css-transition-between-with-unkown-height%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I made a few changes in a fork of the fiddle here. You can read more about this from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
I added a new javascript function, added a css property, and reorganized the css a little
- You must define all the properties you will make subject to the transition using
transition-property
- One significant change is that my javascript function (as adapted from MDN) switches classes on a single div rather than switching the div itself.
Hope this helps!
html
<div id="container">
<div id="target" class="a">
</div>
</div>
javascript
//pretty much straight from the MDN doc...
function updateTransition() {
var el = document.querySelector("div.a");
if (el) {
el.className = "b";
} else {
el = document.querySelector("div.b");
el.className = "a";
}
return el;
}
css
#container{
height: auto;
}
#target{
transition: 2s;
transition-property: width height background-color;
}
.a {
height: 200px;
width: 200px;
background-color:blue;
}
.b {
height: 400px;
width: 300px;
background-color:red;
}
answered Nov 19 '18 at 17:35
Paul Degnan
1,3191922
Thanks so much for your answer. The problem is that I don’t have a class which I am transitioning to - sorry I should have made this more clear. I just have a different size content of a div. in particular I will know the width but not the height. Do you know if there is a way to do this with a auto height container?
– user3284707
Nov 19 '18 at 19:05
This doesn't involve a transition anymore, but there's an easy way to fit the content -- just set a height in px withmin-height, andheight: autojsfiddle.net/w1na6bsf/4 -- Click the "add text" button I added a bunch of times to see what I mean. Apologies if I'm not correctly grasping your intent...
– Paul Degnan
Nov 19 '18 at 19:30
Sorry yes this is kinda how I have it at the moment, I just wanted it to grow or shrink in a nice transition, rather than just jumping to the new size if that makes sense. So if I go from a table with lots of rows to one with only a couple it would transition over say 1 second to the new smaller size.
– user3284707
Nov 19 '18 at 19:38
Perhaps I will have to get the height of the new content and then set this on the div, then I should be able to use the transitions I’m thinking
– user3284707
Nov 19 '18 at 19:39
1
Getting the height of the div and setting this has sorted my problem, thanks very much.
– user3284707
Nov 20 '18 at 16:39
|
show 3 more comments
1
I made a few changes in a fork of the fiddle here. You can read more about this from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
I added a new javascript function, added a css property, and reorganized the css a little
- You must define all the properties you will make subject to the transition using
transition-property
- One significant change is that my javascript function (as adapted from MDN) switches classes on a single div rather than switching the div itself.
Hope this helps!
html
<div id="container">
<div id="target" class="a">
</div>
</div>
javascript
//pretty much straight from the MDN doc...
function updateTransition() {
var el = document.querySelector("div.a");
if (el) {
el.className = "b";
} else {
el = document.querySelector("div.b");
el.className = "a";
}
return el;
}
css
#container{
height: auto;
}
#target{
transition: 2s;
transition-property: width height background-color;
}
.a {
height: 200px;
width: 200px;
background-color:blue;
}
.b {
height: 400px;
width: 300px;
background-color:red;
}
answered Nov 19 '18 at 17:35
Paul Degnan
1,3191922
Thanks so much for your answer. The problem is that I don’t have a class which I am transitioning to - sorry I should have made this more clear. I just have a different size content of a div. in particular I will know the width but not the height. Do you know if there is a way to do this with a auto height container?
– user3284707
Nov 19 '18 at 19:05
This doesn't involve a transition anymore, but there's an easy way to fit the content -- just set a height in px withmin-height, andheight: autojsfiddle.net/w1na6bsf/4 -- Click the "add text" button I added a bunch of times to see what I mean. Apologies if I'm not correctly grasping your intent...
– Paul Degnan
Nov 19 '18 at 19:30
Sorry yes this is kinda how I have it at the moment, I just wanted it to grow or shrink in a nice transition, rather than just jumping to the new size if that makes sense. So if I go from a table with lots of rows to one with only a couple it would transition over say 1 second to the new smaller size.
– user3284707
Nov 19 '18 at 19:38
Perhaps I will have to get the height of the new content and then set this on the div, then I should be able to use the transitions I’m thinking
– user3284707
Nov 19 '18 at 19:39
1
Getting the height of the div and setting this has sorted my problem, thanks very much.
– user3284707
Nov 20 '18 at 16:39
|
show 3 more comments
1
1
1
I made a few changes in a fork of the fiddle here. You can read more about this from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
I added a new javascript function, added a css property, and reorganized the css a little
- You must define all the properties you will make subject to the transition using
transition-property
- One significant change is that my javascript function (as adapted from MDN) switches classes on a single div rather than switching the div itself.
Hope this helps!
html
<div id="container">
<div id="target" class="a">
</div>
</div>
javascript
//pretty much straight from the MDN doc...
function updateTransition() {
var el = document.querySelector("div.a");
if (el) {
el.className = "b";
} else {
el = document.querySelector("div.b");
el.className = "a";
}
return el;
}
css
#container{
height: auto;
}
#target{
transition: 2s;
transition-property: width height background-color;
}
.a {
height: 200px;
width: 200px;
background-color:blue;
}
.b {
height: 400px;
width: 300px;
background-color:red;
}
answered Nov 19 '18 at 17:35
Paul Degnan
1,3191922
I made a few changes in a fork of the fiddle here. You can read more about this from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
I added a new javascript function, added a css property, and reorganized the css a little
- You must define all the properties you will make subject to the transition using
transition-property
- One significant change is that my javascript function (as adapted from MDN) switches classes on a single div rather than switching the div itself.
Hope this helps!
html
<div id="container">
<div id="target" class="a">
</div>
</div>
javascript
//pretty much straight from the MDN doc...
function updateTransition() {
var el = document.querySelector("div.a");
if (el) {
el.className = "b";
} else {
el = document.querySelector("div.b");
el.className = "a";
}
return el;
}
css
#container{
height: auto;
}
#target{
transition: 2s;
transition-property: width height background-color;
}
.a {
height: 200px;
width: 200px;
background-color:blue;
}
.b {
height: 400px;
width: 300px;
background-color:red;
}
answered Nov 19 '18 at 17:35
Paul Degnan
1,3191922
edited Nov 19 '18 at 17:40
answered Nov 19 '18 at 17:35
Paul Degnan
1,3191922
answered Nov 19 '18 at 17:35
Paul Degnan
1,3191922
answered Nov 19 '18 at 17:35
Paul Degnan
1,3191922
1,3191922
Thanks so much for your answer. The problem is that I don’t have a class which I am transitioning to - sorry I should have made this more clear. I just have a different size content of a div. in particular I will know the width but not the height. Do you know if there is a way to do this with a auto height container?
– user3284707
Nov 19 '18 at 19:05
This doesn't involve a transition anymore, but there's an easy way to fit the content -- just set a height in px withmin-height, andheight: autojsfiddle.net/w1na6bsf/4 -- Click the "add text" button I added a bunch of times to see what I mean. Apologies if I'm not correctly grasping your intent...
– Paul Degnan
Nov 19 '18 at 19:30
Sorry yes this is kinda how I have it at the moment, I just wanted it to grow or shrink in a nice transition, rather than just jumping to the new size if that makes sense. So if I go from a table with lots of rows to one with only a couple it would transition over say 1 second to the new smaller size.
– user3284707
Nov 19 '18 at 19:38
Perhaps I will have to get the height of the new content and then set this on the div, then I should be able to use the transitions I’m thinking
– user3284707
Nov 19 '18 at 19:39
1
Getting the height of the div and setting this has sorted my problem, thanks very much.
– user3284707
Nov 20 '18 at 16:39
|
show 3 more comments
Thanks so much for your answer. The problem is that I don’t have a class which I am transitioning to - sorry I should have made this more clear. I just have a different size content of a div. in particular I will know the width but not the height. Do you know if there is a way to do this with a auto height container?
– user3284707
Nov 19 '18 at 19:05
This doesn't involve a transition anymore, but there's an easy way to fit the content -- just set a height in px withmin-height, andheight: autojsfiddle.net/w1na6bsf/4 -- Click the "add text" button I added a bunch of times to see what I mean. Apologies if I'm not correctly grasping your intent...
– Paul Degnan
Nov 19 '18 at 19:30
Sorry yes this is kinda how I have it at the moment, I just wanted it to grow or shrink in a nice transition, rather than just jumping to the new size if that makes sense. So if I go from a table with lots of rows to one with only a couple it would transition over say 1 second to the new smaller size.
– user3284707
Nov 19 '18 at 19:38
Perhaps I will have to get the height of the new content and then set this on the div, then I should be able to use the transitions I’m thinking
– user3284707
Nov 19 '18 at 19:39
1
Getting the height of the div and setting this has sorted my problem, thanks very much.
– user3284707
Nov 20 '18 at 16:39
Thanks so much for your answer. The problem is that I don’t have a class which I am transitioning to - sorry I should have made this more clear. I just have a different size content of a div. in particular I will know the width but not the height. Do you know if there is a way to do this with a auto height container?
– user3284707
Nov 19 '18 at 19:05
Thanks so much for your answer. The problem is that I don’t have a class which I am transitioning to - sorry I should have made this more clear. I just have a different size content of a div. in particular I will know the width but not the height. Do you know if there is a way to do this with a auto height container?
– user3284707
Nov 19 '18 at 19:05
This doesn't involve a transition anymore, but there's an easy way to fit the content -- just set a height in px with
min-height, and height: auto jsfiddle.net/w1na6bsf/4 -- Click the "add text" button I added a bunch of times to see what I mean. Apologies if I'm not correctly grasping your intent...– Paul Degnan
Nov 19 '18 at 19:30
This doesn't involve a transition anymore, but there's an easy way to fit the content -- just set a height in px with
min-height, and height: auto jsfiddle.net/w1na6bsf/4 -- Click the "add text" button I added a bunch of times to see what I mean. Apologies if I'm not correctly grasping your intent...– Paul Degnan
Nov 19 '18 at 19:30
Sorry yes this is kinda how I have it at the moment, I just wanted it to grow or shrink in a nice transition, rather than just jumping to the new size if that makes sense. So if I go from a table with lots of rows to one with only a couple it would transition over say 1 second to the new smaller size.
– user3284707
Nov 19 '18 at 19:38
Sorry yes this is kinda how I have it at the moment, I just wanted it to grow or shrink in a nice transition, rather than just jumping to the new size if that makes sense. So if I go from a table with lots of rows to one with only a couple it would transition over say 1 second to the new smaller size.
– user3284707
Nov 19 '18 at 19:38
Perhaps I will have to get the height of the new content and then set this on the div, then I should be able to use the transitions I’m thinking
– user3284707
Nov 19 '18 at 19:39
Perhaps I will have to get the height of the new content and then set this on the div, then I should be able to use the transitions I’m thinking
– user3284707
Nov 19 '18 at 19:39
1
1
Getting the height of the div and setting this has sorted my problem, thanks very much.
– user3284707
Nov 20 '18 at 16:39
Getting the height of the div and setting this has sorted my problem, thanks very much.
– user3284707
Nov 20 '18 at 16:39
|
show 3 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379382%2freplacing-a-containers-content-with-css-transition-between-with-unkown-height%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
