Mixing
Stacking divs with fixed placeholder (and maintaining during animation)
Stacking divs with fixed placeholder (and maintaining during animation)
Please see jsfiddle. Thank you in advance!
I'm trying to run an animation where one word slides in to replace an existing word.
Stacking - I can stack the divs using absolute but I cannot seem to wrap the div so it retains it's desired place. (i.e. I want the Incoming/Outgoing text in the red box)
Animation - The divs want to stack when both animations are running (after the delay is over for animation number 2). Am I unable to run both "inline/absolute"?
$(function() {
$('#Action').click(function(e) {
//start incoming
Enter('#Incoming', 'fadeInRight');
//add minor delay and then start outgoing
setTimeout(function() {
ExitAndHide('#Outgoing', 'fadeOutLeft');
}, 2000);
});
});
//outgoing function
function ExitAndHide(item, action) {
$(item).removeClass().addClass(action + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(item).hide();
});
};
//incoming function
function Enter(item, action) {
$(item).css("display", "inline-block");
$(item).removeClass().addClass(action + ' animated');
};
.stackable {
position: absolute;
display: inline-block
}
.container {
position: relative;
width: 100%;
border: 1px solid #000;
}
.container2 {
position: relative;
width: 100%;
border: 1px solid #FF0000;
}
.fadeOutLeft {
animation-name: fadeOutLeft
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0)
}
to {
opacity: 1;
transform: none
}
}
.fadeInRight {
animation-name: fadeInRight
}
.text-center {
text-align: center !important;
font-size: xx-large;
}
.animated {
animation-duration: 5s;
animation-fill-mode: both
}
@keyframes fadeOutLeft {
0% {
opacity: 1
}
to {
opacity: 0;
transform: translate3d(-100%, 0, 0)
}
}
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
Content Should be here
Outgoing
Incoming
</div>
<button id=Action>Action</button>
</div>
1 Answer
1
If you want the content in the
Outgoing
Incoming
</div>
</div>
<button id=Action>Action</button>
</div>
I would also add overflow: hidden to .container2 in CSS.
overflow: hidden
.container2
JSFIDDLE ---- [DCML] updated to version with answer
Unfortunately the code snippets only support up to version 2.1.1 of jQuery.
[ EDIT ]
Notably, you're missing the quotes around id=Outgoing and id=Incoming. You must also actually apply position: absolute to these elements, in which case you're also going to need to apply a height value to .container, since .container will not respect the "inherent height" of elements with position: absolute.
id=Outgoing
id=Incoming
position: absolute
height
.container
.container
position: absolute
JSFIDDLE and the code snippet have been updated accordingly.
$(function() {
$('#Action').click(function(e) {
//start incoming
Enter('#Incoming', 'fadeInRight');
//add minor delay and then start outgoing
setTimeout(function() {
ExitAndHide('#Outgoing', 'fadeOutLeft');
}, 2000);
});
});
//outgoing function
function ExitAndHide(item, action) {
$(item).removeClass().addClass(action + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(item).hide();
});
};
//incoming function
function Enter(item, action) {
$(item).css("display", "inline-block");
$(item).removeClass().addClass(action + ' animated');
};
#Incoming, #Outgoing {
position: absolute;
}
.stackable {
position: absolute;
display: inline-block
}
.container {
position: relative;
width: 100%;
border: 1px solid #000;
}
.container2 {
position: relative;
width: 100%;
border: 1px solid #FF0000;
height: 100px;
overflow: hidden;
}
.fadeOutLeft {
animation-name: fadeOutLeft
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0)
}
to {
opacity: 1;
transform: none
}
}
.fadeInRight {
animation-name: fadeInRight
}
.text-center {
text-align: center !important;
font-size: xx-large;
}
.animated {
animation-duration: 5s;
animation-fill-mode: both
}
@keyframes fadeOutLeft {
0% {
opacity: 1
}
to {
opacity: 0;
transform: translate3d(-100%, 0, 0)
}
}
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
Outgoing
Incoming
</div>
</div>
<button id=Action>Action</button>
</div>@DontCallMeLarry i figured it out and updated my answer!
– Anthony
Jun 29 at 23:36
Thank you, you beautiful genius!
– DontCallMeLarry
Jun 30 at 15:10
@DontCallMeLarry youre welcome larry... or whatever you want me to call you hahah an upvote too would be appreciated :)
– Anthony
2 days ago
I wish I could give you an upvote but alas I am so insignificant that my votes do not yet matter
– DontCallMeLarry
20 hours ago
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
"overflow: hidden;" answers the first part, thank you. However there is still a line break when the two animations "connect". I believe this is due to the animation framework not respecting absolute positioning and I'm wondering if there is a way around that.
– DontCallMeLarry
Jun 29 at 23:30