Javascript 未调整视口大小的动画后不渲染画布

我有两个div，每个div包含一张画布。在初始状态下，只有一个显示，另一个显示设置为无。 单击第一个画布时，执行此代码：

$("#graph1").click(function(){
    if(!$("#graphTwo").hasClass("toggled")) {
        $("#graphTwo").animate({"height": "350px"}).removeClass("toggled");
        $("#graphTwo").animate({"width": "700px"});
    } else {
        $("#graphTwo").animate({"height": "0px"}).addClass("toggled");
        $("#graphTwo").animate({"width": "0px"});
    }
});

动画按预期工作，但画布不显示。它仅在调整视口大小后显示。这是为什么？我如何修复它

---

我正在使用chart.js。

当

#图形两个

可见时，您可以尝试调用一个图表

.update（）

。（因为，调整视口大小->更新图表时会发生这种情况）

但你应该注意以下注意事项：

重要注意事项无法检测画布大小更改的时间 直接从canvas元素。Chart.js使用其父容器 更新画布渲染和显示大小

我认为，如果父对象不可见，那么图表将被启动或更新，那么您可能会在以后呈现图表时遇到问题。因此，也许最安全的方法是在动画完成后更新图表

这有什么不同吗

...
if(!$("#graphTwo").hasClass("toggled")) {
  $("#graphTwo").animate({"height": "350px"}).removeClass("toggled");
  $("#graphTwo").animate({"width": "700px"});
  /** add chart update here **/
  the_chart_2.update(); // --> put the Chart instance
}
...

...
if(!$("#graphTwo").hasClass("toggled")) {
  $("#graphTwo").animate({
    "height": "350px",
    "width": "700px"
  },
  500, /* speed */
  function(){
    // Animation ended
    /** add chart update here **/
    the_chart_2.update(); // --> put the Chart instance
  }).removeClass("toggled"); // ?      
}
...