Animate Scroll Flex von rechts nach links dividieren

Question

Beim Klicken auf ein Panel (zB panel1) versuche ich den Bildlauf zum neu hinzugefügten Panel (panel2) auf der linken Seite des Bildschirms zu animieren.
Ich habe

versucht

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

aber, dass animieren nicht und nimmt unverblümt den Fokus auf das neue Panel

ist die JSFiddle.

Hinweis: Ich bin mir nicht sicher, dass Jquery oder CSS-Animationen hier ausgeführt werden können. Suchen nach CSS-Animationen

Answer 1

Sie können wie folgt tun:

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

Arbeits fiddle

Answer 2

Sie können jQuery verwenden, um Ihren Container zu animieren, sodass das neue Bedienfeld (panel2) im Ansichtsport sichtbar ist.

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

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