JSFiddle - React, Tailwind, and code Playground

HTML

<div class="holder">
    <div class="container">
         <div class="slide-left">
             <div>Some content<br/><br/><br/></div>
             <div>Some more<br/><br/><br/></div>
         </div>
         <div class="from-right" style="display:none;"><!--not visible initially-->
             <div>Some more content<br/><br/><br/><br/></div>
         </div>
     </div>
</div>
<a href="javascript:void(0);" id="run">Run</a>
<a href="javascript:void(0);" id="reset">Reset</a>

CSS

.container,.holder{position:relative;}
.container{padding:10px;}

.holder{position:relative;overflow:hidden;margin-left:100px;width:250px;background-color:yellow;}

.transition .container{width:1000px;}

.slide-left{background-color:lightblue;}
.from-right{background-color:orange;}

.transition .slide-left,.transition .from-right {float:left}

.transition .slide-left {
	-webkit-transition: all .6s ease-out;
    -webkit-transform: translateX(-700px);	
}

.transition .from-right{
    opacity:0;
	-webkit-animation: from-right 0.5s ease-in .1s;	
}
@-webkit-keyframes from-right {
	from{
	    opacity:1;
		-webkit-transform: translateX(700px);
	}
	to{
	    opacity:1;
		-webkit-transform: translateX(0);
	}
}

JavaScript

var container = Y.one('.holder');

    Y.one('#reset').on('click',function(e){
       container.removeClass('transition').one('.slide-left').show(); 
       container.one('.from-right').hide();
    });
    Y.one('#run').on('click',function(e){
        
        var pfx = ["webkit", "moz", "MS", "o", ""],				
		prefixedEvent = function (node, type, callback) {
			for (var p = 0; p < pfx.length; p++) {
				if (!pfx[p]) 
					type = type.toLowerCase();
	    		node._node.addEventListener(pfx[p]+type, callback);
			}
		};
		
        prefixedEvent(container.one('.slide-left'), 'TransitionEnd', function(e){
            container.one('.slide-left').hide();
			container.removeClass('transition');
		});
					
        container.one('.from-right').show();
        container.addClass("transition");
        
    });