JavaScript - Get width of element during css transition

I want to display an element's width in javascript. This part is already working, but here is my issue :
When the element's width is animated, during the animation I want to see the real element's width, and not the final element's width.

I'm working with Angular, and what I wanted to do was possible by including JQuery using the function $(el).width() but I want to remove JQuery uses.

I already tried (assuming el is a HTML element) :

el.offsetWidth

el.clientWidth

el.scrollWidth

el.getBoundingClientRect().width

edited Jan 3 at 7:25

asked Jan 2 at 9:15

Mattew Eon

548519

2

You wrote getBoundingRect().width is it a typo or you tried el.getBoundingClientRect().width already?

– t3__rry
Jan 2 at 9:26

It was a typo mistake, sorry. I updated the question

– Mattew Eon
Jan 3 at 7:26

And how did you call the code you are showing? All of these should work: jsfiddle.net/mqe9hgb1 (and same in case of transition)

– Kaiido
Jan 3 at 7:46

You could try to listen to the animationiteration event wilsonpage.co.uk/animation-iteration-event

– t3__rry
Jan 3 at 8:22

add a comment |

I'm working with Angular, and what I wanted to do was possible by including JQuery using the function $(el).width() but I want to remove JQuery uses.

I already tried (assuming el is a HTML element) :

el.offsetWidth

el.clientWidth

el.scrollWidth

el.getBoundingClientRect().width

edited Jan 3 at 7:25

asked Jan 2 at 9:15

Mattew Eon

548519

2

You wrote getBoundingRect().width is it a typo or you tried el.getBoundingClientRect().width already?

– t3__rry
Jan 2 at 9:26

It was a typo mistake, sorry. I updated the question

– Mattew Eon
Jan 3 at 7:26

And how did you call the code you are showing? All of these should work: jsfiddle.net/mqe9hgb1 (and same in case of transition)

– Kaiido
Jan 3 at 7:46

You could try to listen to the animationiteration event wilsonpage.co.uk/animation-iteration-event

– t3__rry
Jan 3 at 8:22

add a comment |

I'm working with Angular, and what I wanted to do was possible by including JQuery using the function $(el).width() but I want to remove JQuery uses.

I already tried (assuming el is a HTML element) :

el.offsetWidth

el.clientWidth

el.scrollWidth

el.getBoundingClientRect().width

edited Jan 3 at 7:25

asked Jan 2 at 9:15

Mattew Eon

548519

I'm working with Angular, and what I wanted to do was possible by including JQuery using the function $(el).width() but I want to remove JQuery uses.

I already tried (assuming el is a HTML element) :

el.offsetWidth

el.clientWidth

el.scrollWidth

el.getBoundingClientRect().width

javascript jquery angular css-animations

edited Jan 3 at 7:25

asked Jan 2 at 9:15

Mattew Eon

548519

edited Jan 3 at 7:25

asked Jan 2 at 9:15

Mattew Eon

548519

edited Jan 3 at 7:25

asked Jan 2 at 9:15

Mattew Eon

548519

asked Jan 2 at 9:15

Mattew Eon

548519

asked Jan 2 at 9:15

Mattew Eon

548519

2

You wrote getBoundingRect().width is it a typo or you tried el.getBoundingClientRect().width already?

– t3__rry
Jan 2 at 9:26

It was a typo mistake, sorry. I updated the question

– Mattew Eon
Jan 3 at 7:26

And how did you call the code you are showing? All of these should work: jsfiddle.net/mqe9hgb1 (and same in case of transition)

– Kaiido
Jan 3 at 7:46

You could try to listen to the animationiteration event wilsonpage.co.uk/animation-iteration-event

– t3__rry
Jan 3 at 8:22

add a comment |

2

You wrote getBoundingRect().width is it a typo or you tried el.getBoundingClientRect().width already?

– t3__rry
Jan 2 at 9:26

It was a typo mistake, sorry. I updated the question

– Mattew Eon
Jan 3 at 7:26

And how did you call the code you are showing? All of these should work: jsfiddle.net/mqe9hgb1 (and same in case of transition)

– Kaiido
Jan 3 at 7:46

You could try to listen to the animationiteration event wilsonpage.co.uk/animation-iteration-event

– t3__rry
Jan 3 at 8:22

You wrote getBoundingRect().width is it a typo or you tried el.getBoundingClientRect().width already?

– t3__rry
Jan 2 at 9:26

It was a typo mistake, sorry. I updated the question

– Mattew Eon
Jan 3 at 7:26

And how did you call the code you are showing? All of these should work: jsfiddle.net/mqe9hgb1 (and same in case of transition)

– Kaiido
Jan 3 at 7:46

You could try to listen to the animationiteration event wilsonpage.co.uk/animation-iteration-event

– t3__rry
Jan 3 at 8:22

add a comment |

1 Answer
1

active

oldest

votes

Some time ago I faced the same issue, with images who are not loaded yet and had the size of 0. I fixed the problem with using the following code to get the original image size. Be sure you continue your code inside the onload function

var image = new Image();

image.onload = function() {



    // set its dimension to target size

    var width = image.width;

    var height = image.height;

};

image.src = el.img;

It is also possible to do this with a base64 string if needed

var image = new Image();

image.onload = function() {



    // set its dimension to target size

    var width = image.width;

    var height = image.height;

};

image.src = "data:image/jpg;base64," + img;

answered Jan 2 at 9:20

R Pelzer

693926

Thanks for your quick answer, but I wasn't talking about an image to load. My issue concern any elements animated with transitions css

– Mattew Eon
Jan 2 at 9:22

add a comment |

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');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003770%2fjavascript-get-width-of-element-during-css-transition%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

var image = new Image();

image.onload = function() {



    // set its dimension to target size

    var width = image.width;

    var height = image.height;

};

image.src = el.img;

It is also possible to do this with a base64 string if needed

var image = new Image();

image.onload = function() {



    // set its dimension to target size

    var width = image.width;

    var height = image.height;

};

image.src = "data:image/jpg;base64," + img;

answered Jan 2 at 9:20

R Pelzer

693926

Thanks for your quick answer, but I wasn't talking about an image to load. My issue concern any elements animated with transitions css

– Mattew Eon
Jan 2 at 9:22

add a comment |

var image = new Image();

image.onload = function() {



    // set its dimension to target size

    var width = image.width;

    var height = image.height;

};

image.src = el.img;

It is also possible to do this with a base64 string if needed

var image = new Image();

image.onload = function() {



    // set its dimension to target size

    var width = image.width;

    var height = image.height;

};

image.src = "data:image/jpg;base64," + img;

answered Jan 2 at 9:20

R Pelzer

693926

Thanks for your quick answer, but I wasn't talking about an image to load. My issue concern any elements animated with transitions css

– Mattew Eon
Jan 2 at 9:22

add a comment |

var image = new Image();

image.onload = function() {



    // set its dimension to target size

    var width = image.width;

    var height = image.height;

};

image.src = el.img;

It is also possible to do this with a base64 string if needed

var image = new Image();

image.onload = function() {



    // set its dimension to target size

    var width = image.width;

    var height = image.height;

};

image.src = "data:image/jpg;base64," + img;

answered Jan 2 at 9:20

R Pelzer

693926

var image = new Image();

image.onload = function() {



    // set its dimension to target size

    var width = image.width;

    var height = image.height;

};

image.src = el.img;

It is also possible to do this with a base64 string if needed

var image = new Image();

image.onload = function() {



    // set its dimension to target size

    var width = image.width;

    var height = image.height;

};

image.src = "data:image/jpg;base64," + img;

answered Jan 2 at 9:20

R Pelzer

693926

answered Jan 2 at 9:20

R Pelzer

693926

answered Jan 2 at 9:20

R Pelzer

693926

answered Jan 2 at 9:20

R Pelzer

693926

Thanks for your quick answer, but I wasn't talking about an image to load. My issue concern any elements animated with transitions css

– Mattew Eon
Jan 2 at 9:22

add a comment |

Thanks for your quick answer, but I wasn't talking about an image to load. My issue concern any elements animated with transitions css

– Mattew Eon
Jan 2 at 9:22

Thanks for your quick answer, but I wasn't talking about an image to load. My issue concern any elements animated with transitions css

– Mattew Eon
Jan 2 at 9:22

add a comment |

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu