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.
  });
}

工作fiddle

Animate Scroll Flex div从左到右

2 个答案: