pannels

by jeum

HTML

<div id="container">
    <div id="mode0" class="sub" ante=1>
        <div class="twins" style="right: 0">
            <h2>Bla bla bla bla</h2>
            
        </div>
        <div class="twins" style="right: 200px">
            <h2>Bla bla bla bla</h2>
        </div>
        <input type="button" value=">" id="go0" ante=1></input>
    </div>
    <div id="mode1" class="sub" ante=0>
        <h2 style="width: 400px;">Bla bla bla bla</h2>
        <div class="tris" style="left: 0"></div>
        <div class="tris" style="left: 100px"></div>
        <div class="tris" style="left: 300px"></div>
        <input type="button" value="<" id="go1" ante=0></input>
        <input type="button" value="GO" id="go"></input>
    </div>
</div>

CSS

div{
    position: absolute;
	top: 0;
	bottom: 0;
    overflow: hidden;
}
input{
    position: absolute;
    bottom: 0;
    
}
#container{
	left: 0;
	right: 0;
    margin: auto;
	width: 400px;
	height: 200px;
}
.sub{
    -webkit-transition: width 1s ease-out;
    -moz-transition: width 1s ease-out;
    -o-transition: width 1s ease-out;
    transition: width 1s ease-out;
}
#mode0{
	left: 0;
	width: 100%;
    background-color: blue;
}
#mode1{
    right: 0;
    width: 0;
    background-color: red;
}
#go0{
    right: 0;
}
#go1{
    left: 0;
}
#go{
    left: 357px;
}
.twins{
	width: 200px;
    border: solid yellow 1px;
    background-color: green;
}
.tris{
	width: 100%;
    border: solid yellow 1px;

}
h2{
    position: absolute;
    margin: 0.5em;
}
span{
    position: absolute;

}

JavaScript

document.getElementById('go0').addEventListener('click', toggle, false);	document.getElementById('go1').addEventListener('click', toggle, false);

var transitionEvent = whichTransitionEvent();
console.log(transitionEvent);

function toggle(e){
    //console.log(this.value === '>')? ';
    this.parentElement.removeEventListener(transitionEvent, transitionEnded);
    this.parentElement.style.zIndex = 9;
    var pre = document.getElementById( 'mode' + this.getAttribute('ante') );
    pre.addEventListener(transitionEvent, transitionEnded);
    pre.style.zIndex = 10;
    pre.style.width = '100%';
}
function transitionEnded(e){
    var pre = document.getElementById( 'mode' + this.getAttribute('ante') );
    pre.style.width = 0;
}
// http://davidwalsh.name/css-animation-callback
function whichTransitionEvent(){
	var t;
	var el = document.createElement('fakeelement');
	var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' };
	for(t in transitions){
		if( el.style[t] !== undefined ){
			return transitions[t];
		}
	}
}