I want to get the width of an element in js and based on that width want to perform some animations. I am resizing the width of the below div from 1112px to 752px through CSS animation, when it reaches 752px I want animation on another element to begin.
HTML
<div id="mapId" class="map-root" lwc:dom="manual"></div>
CSS
.map-root {
height: 370px;
width: 1112px;
border-radius: 5px;
}
.map-root-animation {
animation: mapWidthAnimation 0.5s forwards 0s ease;
}
@keyframes mapWidthAnimation {
0% {
width: 1112px;
height: 370px;
}
100% {
width: 752px;
height: 370px;
}
}
On the click event of a button:
this.template.querySelector('.map-root').classList.add('map-root-animation');
let mapWidth = this.template.querySelector('.map-root');
console.log(mapWidth.style.width);// I get blank value in the console.
if (mapWidth.style.width == 752px) { //do something }