Changing max-height back to zero as transition or animation - javascript

So I have got an animation on an object (<div>).
#keyframes fade-in-left {
0% {
max-height: 0px;
}
100% {
max-height: 200px;
}
This animation obviously happens when the object is being created. What I need now is an animation or transition that shrinks my object back down to max-height: 0px;.
Giving the property max-height an transition and then changing the value of it in js to 0px does nothing.
Also creating a reversed animation and then repolacing the original
object with a clone and this animation does not bring the object down
to 0px.
(Please keep in mind that I am not intersted in changing the scale or other transform properties)
Thanks for your suggestions!
More details:
My <div> object:
#keyframes fade-in-left {
0% {
max-height: 0px;
}
100% {
max-height: 200px;
}
}
.law-list .law-item {
-webkit-transition: max-height .9s linear;
-moz-transition: max-height .9s linear;
-ms-transition: max-height .9s linear;
-o-transition: max-height .9s linear;
transition: max-height .9s linear;
}
.fade-in {
-webkit-animation-duration: .9s;
animation-duration: .9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fade-in-left;
animation-name: fade-in-left;
}
I create my html content in js and the html elements looks like this:
<div class='law-item fade-in' id='law_0'>Law Nr.1</div>
<div class='law-item fade-in' id='law_1'>Law Nr.2</div>
So when an element is created, the max-height animation plays.
When I want to delete an object, I want the situation stated above to occur: a fade out animation and then an deletion.
I handel his in a js function:
function removeLaw(id) {
document.getElementById("law_" + id).style.maxHeight = "0px";
setTimeout(function() {
document.getElementById("law_" + id).parentElement.removeChild(document.getElementById("law_" + id));
}, 900);
}
As stated it should fade out to 0 max-height. But all it does it stay at the current max-height and then after max-height get deleted.

There is always more than one way to do something. Since you are using an animation to set the height, it is best to use an animation to remove the height as well. Think of the animation ending at 100%. At this point, your max-height is set. Even though you have a transition set on the element, the animation is preventing the transition from firing as it should. The animation event is still firing even though it is at 100%. You could set an event listener on the animationend event from the beginning and pause the animation. I haven't tried this, but it may work.
What I found in your case is to create a fade-out class and a fade-out animation. I removed all references to transition from your css since I used animations. I suppose you could go the other way and use only transitions instead of animations, but mixing them is the problem you have been having.
I created a basic click event listener on each law-item and changed the class on the item prior to removing when the new animation ended.
function removeLaw(id) {
var el = document.getElementById(id);
el.classList.remove('fade-in');
el.classList.add('fade-out');
el.addEventListener('animationend', function(e) {
el.remove();
})
}
var lawItems = document.querySelectorAll('.law-item');
lawItems.forEach(function(lawItem){
this.addEventListener('click', function(e) {
removeLaw(e.target.id)
})
})
#keyframes fade-in-left {
0% {
max-height: 0px;
}
100% {
max-height: 200px;
}
}
#keyframes fade-out-left {
0% {
max-height: 200px;
}
100% {
max-height: 0px;
}
}
.law-list .law-item {
height: 200px;
}
.fade-in {
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fade-in-left;
animation-name: fade-in-left;
}
.fade-out {
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fade-out-left;
animation-name: fade-out-left;
}
<div class='law-list'>
<div class='law-item fade-in' id='law_0'>Law Nr.1</div>
<div class='law-item fade-in' id='law_1'>Law Nr.2</div>
</div>

Related

I want to do an animation, but just one time, not to be on a loop [duplicate]

I'm running an animation on some elements that are set to opacity: 0; in the CSS. The animation class is applied onClick, and, using keyframes, it changes the opacity from 0 to 1 (among other things).
Unfortunately, when the animation is over, the elements go back to opacity: 0 (in both Firefox and Chrome). My natural thinking would be that animated elements maintain the final state, overriding their original properties. Is this not true? And if not, how can I get the element to do so?
The code (prefixed versions not included):
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; }
50% { transform:scale(1.2); opacity:0.5; }
100% { transform:scale(1.0); opacity:1.0; }
}
Try adding animation-fill-mode: forwards;. For example, the shorthand would be used like this:
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
animation: bubble 1.0s forwards;
If you are using more animation attributes the shorthand is:
animation: bubble 2s linear 0.5s 1 normal forwards;
This gives:
bubble animation name
2s duration
linear timing-function
0.5s delay
1 iteration-count (can be 'infinite')
normal direction
forwards fill-mode (set 'backwards' if you want to have compatibility to use the end position as the final state[this is to support browsers that has animations turned off]{and to answer only the title, and not your specific case})
Available timing-functions:
ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end
Available directions
normal | reverse | alternate | alternate-reverse
IF NOT USING THE SHORT HAND VERSION: Make sure the animation-fill-mode: forwards is AFTER the animation declaration or it will not work...
animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;
vs
animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
Use
animation-fill-mode: forwards;
animation-fill-mode: forwards;
The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count).
Note: The #keyframes rule is not supported in Internet Explorer 9 and earlier versions.
Working example
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
animation: bubble 3s forwards;
/* animation-name: bubble;
animation-duration: 3s;
animation-fill-mode: forwards; */
}
/* Safari */
#-webkit-keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
/* Standard syntax */
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>
I had an issue using forwards: at least in Chrome, even after the animation ended, the renderer was still sucking up graphics resources, making the application less responsive.
An approach that does not cause this trouble is by using an EventListener.
CSS animations emit events, so you can use the animationend event to intervene when the animation ends.
CSS
.fade_in {
animation: fadeIn 2s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
JavaScript
const element = document.getElementById("element-to-be-animated");
element.addEventListener("animationend", () => {
// Set your final state here. For example:
element.style["opacity"] = 1;
}, { once: true });
The option once: true tells the engine to remove the event listener after its execution, leaving your application fresh and clean.
I have created a JSFiddle to show how it works.

How to control the transform distance with pure JavaScript

I made this
http://codepen.io/adamchenwei/pen/dOvJNX
and I try to apply a certain way of moving for a dom so it move for a fixed distance and stop, instead of animate and move through the whole width of the dom. However, I don't really want to fix the distance inside the css keyframe because I need to detect that distance dynamically, since my div that got animated ideally will change the width dynamically as well since that is not going always be 100% or any specific px fixed.
Is there way I can do that in JavaScript instead and not let css to take charge in this transform distance part?
Cross browser capacity will be great.
SCSS
.myItem {
height: 100px;
width: 501px;
background-color: beige;
animation: to-left-transition 300ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes to-left-transition {
0% {
transform: translate(0);
}
100% {
transform: translate(100%);
}
}
HTML
<div class="myItem">
stuff here
</div>
Found out a better way. Soooooo much easier!
I should have been using transition instead of animation. As that give me the flexibility to adjust the animation accordingly.
Hope it helps someone else to save couple hours!
http://codepen.io/adamchenwei/pen/xRqYNj
HTML
<div class="myItem">
stuff here
</div>
CSS
.myItem {
position: absolute;
height: 100px;
width: 501px;
background-color: beige;
transition: transform 1s;
}
JS
setTimeout(function() {
document.getElementsByClassName('myItem')[0].style.transform="translateX(400px)";
console.log('ran');
}, 3000);
EDIT
Below is a method sugguested by Dennis Traub
setTimeout(function() {
console.log('ran');
$("head").append('<style type="text/css"></style>');
var new_stylesheet = $("head").children(':last');
new_stylesheet.html('.myItem{animation: to-left-transition 600ms;}');
}, 3000);
.myItem {
position: absolute;
height: 100px;
width: 501px;
background-color: beige;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes to-left-transition {
0% {
transform: translate(0);
}
100% {
transform: translate(100%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item" class="myItem">
stuff here
</div>
Answer Before EDIT
Here is a good reference for something similar to what i think you are trying to accomplish.
Based on your dynamic input you could have a function that controls how far the div transitions. Still use your code for transition in the css, but compute how far you want in the jquery or JavaScript. Then call the css transition for how far or long you want to transition.
var boxOne = document.getElementsByClassName('box')[0],
$boxTwo = $('.box:eq(1)');
document.getElementsByClassName('toggleButton')[0].onclick = function() {
if(this.innerHTML === 'Play')
{
this.innerHTML = 'Pause';
boxOne.classList.add('horizTranslate');
} else {
this.innerHTML = 'Play';
var computedStyle = window.getComputedStyle(boxOne),
marginLeft = computedStyle.getPropertyValue('margin-left');
boxOne.style.marginLeft = marginLeft;
boxOne.classList.remove('horizTranslate');
}
}
$('.toggleButton:eq(1)').on('click', function() {
if($(this).html() === 'Play')
{
$(this).html('Pause');
$boxTwo.addClass('horizTranslate');
} else {
$(this).html('Play');
var computedStyle = $boxTwo.css('margin-left');
$boxTwo.removeClass('horizTranslate');
$boxTwo.css('margin-left', computedStyle);
}
});
.box {
margin: 30px;
height: 50px;
width: 50px;
background-color: blue;
}
.box.horizTranslate {
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
margin-left: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Pure Javascript</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
<h3>jQuery</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
This code was written by Zach Saucier on codepen
This is a good reference for manipulating css with JS: https://css-tricks.com/controlling-css-animations-transitions-javascript/

show div and execute CSS animation in separate div on "li hover"

I am trying to show a css animation when hovering on nav li a. So far I have tried several different examples on how to show and hide information from different elements but can get mine to work. Here is the CSS and HTMl, I do not provide any jS or jQuery since I could get any to work but below you have a jsfiddle ready to go. All help highly appreciated.
.box {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff
}
#-webkit-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#-moz-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#-o-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
<nav class="nav">
<ul>
<li class="navLink">Home</li>
<li class="navLink">Away</li>
</ul>
</nav>
<div class="box">this should show only when hovering li element</div>
FIDDLE
You can use jQuery to trigger the CSS3 animation with a class change :
DEMO
CSS :
.box {
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff;
height:0;
}
.box.show {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
height:35px;
}
#-webkit-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#-moz-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#-o-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
jQuery :
$('nav li a').hover(function () {
$('.box').toggleClass('show');
});
You can try this jQuery. You just have to modify it to your needs... but this should get you started.
$(".navLink").mouseenter(function(){
$(".box").css("visibility", "visible")
});
$(".navLink").mouseleave(function(){
$(".box").css("visibility", "hidden")
});
If you put this in your javascript part in jsFiddle, it works.
You have to add style for div box as
<div class="box" style="display:none">
and add following javascript code:
$(document).ready(function(){
$(".navLink").hover(function(){
$(".box").toggle();
});
});
See the updated fiddle: Updated fiddle
There you go :). assumes jquery is up and running!
$(document).ready(function() {
var divToShow = $('.box');
var links = $('.navLink');
var fadeDuration = 500;
//initial hiding of div
divToShow.hide();
//add listener when mouse enters hover-state on link
links.mouseenter(function() {
//stop animation if there is one
divToShow.stop();
//fade it in
divToShow.fadeIn();
});
//add listener for when mouse leaves link
links.mouseleave(function() {
//stop animation if there is one
divToShow.stop();
//fade it out
divToShow.fadeOut();
});
});
this initially hides your div and fades it in and out when hovered. Compared to the other solutions this also takes care of switching from hovering from one link to another without appruptly changing the animation. totally smooth... ;)
Just select jQuery 2.1 and paste this in you jsFiddle...should work immediately!

ng-animate doesn't let animation be finished

I have set animations on ng-view to fade for 1 second, but it doesn't let the animation out be finished:
.fadethis {
&.ng-enter, &.ng-leave {
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
transition: all linear 1s;
display: block !important;
}
&.ng-enter, &.ng-leave.ng-leave-active {
opacity:0;
}
&.ng-leave, &.ng-enter.ng-enter-active {
opacity:1;
}
}
can't I make angular-animate finish the 1 second animation first?
DEMO: http://jsfiddle.net/bnyJ6/79/
It does not look like your view is actually fading out in your example. If it did, the page you are navigating to would appear and begin fading in before the previous page had finished fading out.
Currently I believe the easiest way to simulate the animations waiting for each other is to add a transition-delay to the enter animation (source).
This can get messy though. In your example the page you are navigating to would still begin to take up space before fading in and bump down the page that is fading out. You can get around this by setting your view to position: absolute;.
Demo without transition-delay: http://jsfiddle.net/5evFx/
Demo with transition-delay and position: absolute: http://jsfiddle.net/spKnX/
Working markup:
<div ng-view class="view fadein fadeout"></div>
Working CSS:
.fadein.ng-enter,
.fadeout.ng-leave {
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
display: block !important;
}
.fadein.ng-enter {
opacity: 0;
}
.fadeout.ng-leave {
opacity: 1;
}
.fadein.ng-enter.ng-enter-active {
transition-delay: 1s;
opacity: 1;
}
.fadeout.ng-leave-active {
opacity: 0;
}
html, body, .container {
height: 100%;
}
.view {
position: absolute;
}

Unset element visibility, change innerHTML, and transisition back

I have an element on my HTML page that I want to give dynamic content, and I want inserted HTML to transition from 0% to 100% opacity.
HTML
<div id="content"></div>
CSS
#content {
opacity: 1;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
}
#content.hide {
opacity: 0;
}
JavaScript
function setContent(html) {
var content = document.getElementById("content");
//Set hide class
content.className += " hide";
//Set HTML
content.innerHTML = html;
//Unset hide class
content.className = content.className.replace(/(?:^|\s)hide(?!\S)/g, '');
}
Note that setContent() sets and then unsets the hide class. However, it seems that the browser (Chrome at least) does not invalidate content element until after it return from the function, so the element does not get the chance to transistion. How can I make sure that the animation plays?
EDIT: To be clear, setContent() is called after the DOM is loaded. Imagine an app that clears and repopulates the screen when some action occurs.
Can you be more clear as what the context of this is?
Also where are you calling the function? Is the place where you are calling the function inside a DOM ready function?
In jQuery it would be something like this:
$(document).ready(function(){
//call the function inside here.
});
What about using animations?
#content {
padding-left: 32px;
padding-right: 32px;
animation: fadein 0.5s;
-moz-animation: fadein 0.5s;
-webkit-animation: fadein 0.5s;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}

Categories