html - 多个 CSS 转换同时发生

Question

我正在尝试制作一个按钮，在单击时同时淡出和缩小宽度，但我只能通过过渡和宽度立即获得不透明度缓和效果。

这是它所在的网站，here it is.它是底部的 Skype 聊天按钮。

这是 CSS:

div.skypediv{
     transition: all 3s;
     -webkit-transition:all 3s; /*Safari*/
}

Answer 1

避免使用 javascript 更改许多样式。切换类(class)并使用类似 Skype 的东西作为 id。

#skype{
-webkit-transition:all 700ms ease;
-webkit-transform:scaleX(1);
opacity:1;
}
#skype.hide{
-webkit-transform:scaleX(0.5);
opacity:0;
}

然后用 javascript 做类似的事情:

document.getElementById('skype').onclick=function(){this.classList.add('hide')}