私はVueを使用しています。私は次のようなdivを持っています：
<div :style="'width:' + imageSize.width + 'px; height:' + imageSize.height + 'px'" id="image-container"></div>
ディメンションは次のようにデータに保存されます。
data() {
return {
...
imageSize: {
width: 500,
height: 500
}
...
}
また、divをズームインおよびズームアウトするための2つのボタンがあります。
<v-btn rounded color="white" class="ma-2" @click="zoom('+')">
<v-icon>mdi-magnify-plus-outline</v-icon>
</v-btn>
<v-btn rounded color="white" class="ma-2" @click="zoom('-')">
<v-icon>mdi-magnify-minus-outline</v-icon>
</v-btn>
ズームの機能は次のようになります。
zoom(type) {
if(type == '+') {
this.imageSize.height += 100;
this.imageSize.width += 100;
console.log('Zoom in clicked!')
} else {
this.imageSize.height -= 100;
this.imageSize.width -= 100;
console.log('Zoom out clicked!')
}
const { offsetWidth, offsetHeight } = document.getElementById("image-container");
console.log(offsetWidth);
console.log(offsetHeight);
},
ボタンをクリックしてdivを拡大すると、すべてが機能し、divのサイズが片側100pxずつ増加します。しかし、divのサイズ（データに保存する必要がある）を取得すると、サイズは同じままです。また、もう一度クリックすると、以前のズームサイズが表示されることに気付きました。コンソールのスクリーンショットは次のとおりです。コンソールのスクリーンショット
500を取得すると、600を取得する必要があります。前もって感謝します！
setTimeout(() => {
const { offsetWidth, offsetHeight } = document.getElementById("image-container");
console.log(offsetWidth);
console.log(offsetHeight);
}, 100)
ifelseブロックの後にこれを試してください。
これは、2日前にgsapでアニメーションを作成しているときに発生しました。私の推測では、image.heightまたはimage.widthが変更されるまでに、他のステートメントはその前に実行されます。つまり、変更に時間がかかりました。
私はこれを試しましたが、私の場合はうまくいきました。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加