button之间的切换动画

html部分，没什么好说的 button1 button2 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); }

转载于:https://www.cnblogs.com/yc609/p/7065084.html