button之间的切换动画
html部分,没什么好说的
css部分,设置一个过渡效果
.button{
width: 100px;
height: 40px;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
tranition: all 1s ease;
transform: translateX(0px);
opacity: 1;
}
js部分
var b1 = document.getElementById('button1');
var b2 = document.getElementById('button2');
//define css style for b1 and b2
function changeButton(element){
var one = b1;
var two = b2;
if(element!=b2){
one = b2;
two = b1;
two.style.transform = "translateX(0px)";
one.style.transform = "translateX(0px)";
}else{
two.style.transform = "translateX(100px)";
one.style.transform = "translateX(100px)";
}
two.style.opacity = 0;
one.style.opacity = 1;
}
//define click event of b1
b1.onclick = function(){
changeButton(this);
}
//define click event of b2
b2.onclick = function(){
changeButton(this);
}
现实很残酷,但只要有梦想,坚持下去,就一定有希望