HTML offsetLeft変更の遅延

Question

私の画面にはcanvasが4つあり、上に2つ、下に2つあります。

それぞれには、キャンバスを最大にし、他を隠すボタンがあります。

このボタンは、各キャンバスの上に配置され、絶対位置はキャンバスのoffsetTopとoffsetLeftに基づいています。

ただし、キャンバスを最大化または最小化すると、ボタン式はwidthプロパティのみを更新します。

奇妙なことは、resizeも呼び出す画面のサイズを変更すると、すべてが適切な場所に移動するということです。

EDIT：追加情報：私はVueJSを使用していますと、他のキャンバスを隠すために、私は彼らにのみ親divsを、v-show="false"を適用display: noneを適用します。

一部抜粋：

初期リサイズとリスナー：

window.onload = function() { 
    resizeAll(); 
    window.addEventListener('resize', resizeAll, false); 
}; 

リサイズハブ：

function resizeAll() { 
    vue.$refs.panelOne.resizeDefault(); 
    // ... 
    vue.$refs.panelN.resizeDefault(); 
} 

パネルのサイズ変更デフォルトとメソッドのサイズを変更します。の伝播である

私はSPHINXに同意

function getScreenDimensions() { 
    return { 
     width: window.innerWidth - 310, 
     height: window.innerHeight * 0.92 
    }; 
} 

function getHalfScreenDimensions() { 
    return { 
     width: (window.innerWidth - 310)/2, 
     height: (window.innerHeight * 0.92)/2 
    }; 
} 

Answer 1

、それが問題のように思える：

resizeDefault() { 
     let dimensions; 
     if (this.expanded) { 
      dimensions = getScreenDimensions(); 
     } else { 
      dimensions = getHalfScreenDimensions(); 
     } 
     this.resize(dimensions.width, dimensions.height); 
    } 

resize (width, height) { 
     this.canvas.width = width; 
     this.canvas.height = height; 
     this.expandStyles.top = (this.canvas.offsetTop + 10) + 'px'; 
     this.expandStyles.left = (this.canvas.offsetLeft + this.canvas.width - 40) + 'px'; 
     drawInterface.redraw(); 
    } 

そして最後に、寸法ゲッターは：「expandStylesは、」ボタンに適用されるCSSスタイルですthis.expandStylesの反応性プロパティを実際のDOMに変換します。あなたのキャンバスと位置付けアプリケーションを持つテンプレートの部分を共有できる場合に便利です。

一方、setTimeOutが正しく感じられない場合は、Vue: nextTickを使用して操作の順序（スタイルの再計算、再描画）を設定することで、さらに「Vue-way」を実行できます。