I am attempting to scale a div when another is clicked, with the scaling origin starting from where the click occurred. This is similar to Apple's behavior when you open an app and it expands from where you clicked.
However, I'm facing an issue where setting the property of the scale origin has no effect when clicking on the div directly. It only works when I include a timeout function that applies the class for full scaling.
The situation when the class is added before CSS is applied:
var xPosSTR = 30+'px';
var yPosSTR = 30+'px';
$('.box-detail').css({
'transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px',
'-webkit-transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px'
});
$(".box-detail").addClass("box-reveal-prop");
When the class is applied with a delay (scaling from the specified origin but taking time):
var xPosSTR = 30+'px';
var yPosSTR = 30+'px';
$('.box-detail').css({
'transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px',
'-webkit-transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px'
});
setTimeout(function(){
$(".box-detail").addClass("box-reveal-prop");
}, 2000);
CSS styles:
.box-detail {
display: inline-block;
position: absolute;
height: 100%;
width: 100%;
transition: 0.3s;
z-index: 1000;
transform:scale(0,0);
}
.box-reveal-prop {
transform:scale(1,1);
}
Is there a way to achieve this without using a timeout function? Thank you!