JQuery переключения слайдов анимации чистого яваскрипта анимации

Question

Смотрите здесь https://jsfiddle.net/97Lahmoh/ ИЛИ http://www.w3schools.com/code/tryit.asp?filename=FB8TE2KSHGZ5

в основном я хочу использовать JQuery щ тумблер слайд анимацию без JQuery и плагинов. Это код jquery, который выполняет работу.

$("#effect").toggle("slide", {direction: "left"}, 500); 

как использовать его на чистом javascript-коде? Я не умею анимации.

Answer 1

Вы можете использовать переход CSS с позиции собственности.

попробовать это один:

function toggle() { 
 
    var div1 = document.getElementById("div1"); 
 
    if (document.getElementsByClassName("hide").length == 0) { 
 
    div1.className = "test hide"; 
 
    } else { 
 
    div1.className = "test show"; 
 
    } 
 

 
}

.test { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: #2354A4; 
 
    transition: left 2s; 
 
    position: relative; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    right: 0px; 
 
} 
 

 
.hide { 
 
    left: -250px; 
 
} 
 

 
.show { 
 
    left: 0px; 
 
}

<div id="div1" class="test hide"> 
 

 
</div> 
 

 
<button id="btnToggle" onclick="toggle()" type="button" name="btnToggle">TOGGLE</button>

Answer 2

Вы можете достичь этого, используя csstransition.

Вот JSFIDDLE