JSFiddle - React, Tailwind, and code Playground

by dioslaska

HTML

<div id="cont">
    <div id="translate">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>

<button id="test">Test</button>

CSS

#cont {
    width: 50px;
    height: 90px;
    border: 1px solid black;
    margin: 20px;
    overflow: hidden;
}

#translate {
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
}

#translate.a {
    -webkit-transform: translate3d(0, -60px,0);
    -moz-transform: translate3d(0, -60px,0);
}

#translate div {
    height: 30px;
    line-height: 30px;
    text-align: center;
}

JavaScript

$('#test').click(function() {
    $('#translate').toggleClass('a');
});