从左向右滚动Flex Flex div动画

Question

On click of a panel (say panel1 ) I am trying to animate scroll to the newly added panel ( panel2 ) to left side of the screen.
I have tried

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

but that doesn't animate and bluntly takes the focus to the new panel

Here is the JSFiddle .

Note : I am not sure jquery or CSS animations can be done here. looking for CSS animations

Answer 1

You can use jQuery to animate your container so the new panel ( panel2 ) is visible in the view port.

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

You can do like this:

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

Working fiddle