css自左向右过渡,CSS 3从左侧过渡插入

PIPIONE

使用CSS3 2D transform避免性能问题(移动)甲常见缺陷是有生命的left/ top/ right/ bottom属性，而不是使用CSS变换，以实现相同的效果。出于各种原因，变换语义使它们更容易卸载，但left/ top/ right/ bottom更难。资料来源：Mozilla开发人员网络(MDN)演示：var $slider = document.getElementById('slider');var $toggle = document.getElementById('toggle');$toggle.addEventListener('click', function() {    var isOpen = $slider.classList.contains('slide-in');    $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');});#slider {    position: absolute;    width: 100px;    height: 100px;    background: blue;    transform: translateX(-100%);    -webkit-transform: translateX(-100%);}.slide-in {    animation: slide-in 0.5s forwards;    -webkit-animation: slide-in 0.5s forwards;}.slide-out {    animation: slide-out 0.5s forwards;    -webkit-animation: slide-out 0.5s forwards;}    @keyframes slide-in {    100% { transform: translateX(0%); }}@-webkit-keyframes slide-in {    100% { -webkit-transform: translateX(0%); }}    @keyframes slide-out {    0% { transform: translateX(0%); }    100% { transform: translateX(-100%); }}@-webkit-keyframes slide-out {    0% { -webkit-transform: translateX(0%); }    100% { -webkit-transform: translateX(-100%); }}

   

•        
• Lorem       
• Ipsum       
• Dolor   

Toggle