從左向右滾動Flex Flex div動畫

Question

在單擊面板（例如panel1 ）時，我試圖使滾動到屏幕左側的新添加的面板（ panel2 ）動畫。
我努力了

windows.location = '#p2' // panel2 id 

但這並沒有生氣蓬勃，並且直截了當地將焦點轉移到了新面板上

這是JSFiddle 。

注意 ：我不確定可以在這里完成jquery或CSS動畫。 尋找CSS動畫

Answer 1

您可以使用jQuery為容器設置動畫，以便新面板（ panel2 ）在查看端口中可見。

https://jsfiddle.net/wtfc8o2t/6/

function addPanel(elemId) {
  document.getElementById(elemId).style.display = 'flex';
  $( "#flex-container" ).animate({
    left: "-=450"
  }, 1000, function() {
    // Animation complete.
  });
}

Answer 2

您可以這樣：

function addPanel(elemId) {
  $('#'+elemId).css('display', 'flex');
  $('html, body').animate({
    scrollLeft: $('#'+elemId).offset().left
  }, 1000, function() {
    // Animation complete.
  });
}

工作提琴