Default style property when animating in Javascript

Question

I am making a function to animate elements in the DOM. Everything works, except for one thing.

Transitions are only working while the element has the css property that has to be animated. For example, I want to slowly fade out an element (opacity 1 to opacity 0). This works only of I apply the opacity property manually. So:

<div class="header-logo" id="id" style="opacity: 1;">Logo</div>

works with the following code:

animate(css) {
    if(this !== undefined && css) {
        this.css = css;
    }

    let start = performance.now();

    requestAnimationFrame(function animate(time) {
        let timeFraction = (time - start) / this.duration;

        if( timeFraction > 1) timeFraction = 1;

        let timing = this.timer(timeFraction); //Different timers for different easing (like ease-in-out)

        this.draw(timing);

        if (timeFraction < 1) {
            requestAnimationFrame(animate.bind(this));
        }
    }.bind(this));
}

draw(timing) {
    for(let property in this.css) {
            this.element.style[property] -= timing * (this.element.style[property] - this.css[property]);
    }
}

But if I don't apply the opacity: 1;, the code doesn't animate.

My concrete question
How can I check whether an element has the to be animated style property? And if it doesn't have the property, how can I apply (dynamically) the to be animated property (so without setting it by hand in the css sheet or inline)?

Not sure if I understand your question well. Do you want to set the style property of an element with javascript? You can do that with `document.getElementById("id").style.opacity = 1` — Sventies, Jun 06 '17 at 08:16
If you want to **check** the opacity of an element, check it with `document.getElementById("id").style.opacity`. But beware, if the opacity is not set, it will return an empty string while it will default to an opacity of 1. — Sventies, Jun 06 '17 at 08:20
Thanks for your comments. Changed the question a bit, so I hope it is more clear now. — Eran Machiels, Jun 06 '17 at 08:20

Sventies · Accepted Answer · 2017-06-06T09:42:13.097

0

How can I check whether an element has the to be animated style property?

To check if the opacity is actually 1, set manually or otherwise:

document.getElementById("id").style.opacity === "1"

To check if the opacity is effectively rendered by the browser as being 1:

document.getElementById("id").style.opacity === "" || document.getElementById("id").style.opacity === "1"

To check styles that are set with CSS:

window.getComputedStyle(document.getElementById("id")).opacity === "1"

how can I apply (dynamically) the to be animated property (so without setting it by hand in the css sheet or inline)?

document.getElementById("id").style.opacity = "1"

As a final remark: be aware that there are a lot of great libraries doing all this work for you. A couple are:

Jquery (although this gives you a lot more than just animations)
D3 (awesome but can be a steep learning curve for a start)
Dynamicsjs (smaller and more specific for animations, but not a very big community behind it)

edited Jun 06 '17 at 09:42

answered Jun 06 '17 at 08:25

Sventies

2,314
1
28
44

Thank you for your answer. I am not using any library because I am making my own for learning purposes. How to do this for `opacity`is clear now, but what if I would like to animate something like the `font-size`? How could I set the default property then? Or `border-size`? – Eran Machiels Jun 06 '17 at 09:01
font-size => fontSize. border-size => borderSize (although I'm not aware of this one, maybe you want to use borderStyle or borderWidth instead?) . I guess you catch the drift. See also https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style and https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle – Sventies Jun 06 '17 at 09:04
I mean the value of the property. Imagine I have a font size of 12px, assigned in my stylesheet. I want to animate that font size to 20px. I can't get the already assigned font size from the `element.style` object (why?), but because the animation need a value to calculate from (20px - 12px), I have to set that 12px somewhere. Otherwise my code can't calculate the difference between the two values. – Eran Machiels Jun 06 '17 at 09:18
I see, you want to GET the style property that is SET with CSS => you want to use `getComputedStyle()` => `window.getComputedStyle(document.getElementById("id")).fontSize`. This has already been answered here as well: https://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript – Sventies Jun 06 '17 at 09:39
Yess, that was what I was looking for. Thanks a lot! – Eran Machiels Jun 06 '17 at 11:42

Default style property when animating in Javascript

1 Answers1