我只是测试了几个 CSS 转换(我是 CSS 初学者)。所有的过渡都很顺利。但是在其中一个过渡中,当鼠标悬停完成时,过渡会顺利进行,而一旦您将鼠标移开,它就会突然结束。在所有其他情况下,mouseover 和 mouseout 都运行良好。
过渡以这种方式结束的原因是什么?如何解决? (固定:感谢@Edwin)。 现在,请解释为什么它在没有更改的情况下不起作用。
jsbin: http://jsbin.com/oposof , http://jsbin.com/oposof/5 (我担心第一个过渡“三 Angular 形”)。
#container1 > div.triangle {
border-bottom: 80px solid red;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
width: 0px;
height: 0px;
-webkit-transition: all 1.2s ease-in-out;
}
#container1 > div.triangle:hover {
border-top: 80px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
#container1 > div.triangle:active {
border-left: 80px solid blue;
border-right: 60px solid transparent;
}
#container2 > div.testt {
color: red;
-webkit-transition: all 1s ease-in-out;
}
#container2 > div.testt:hover {
color:yellow;
}
#container3 > div.circle {
border-radius: 70px;
width: 100px;
height: 100px;
background: red;
-webkit-border-radius: 50px;
-webkit-transition: all 1.2s ease-in-out;
}
#container3 > div.circle:hover {
-webkit-border-radius: 20px;
-webkit-transform: rotate(-45deg);
}
我使用了 添加了 -webkit-
,所以上面的演示只能在 chrome 和 safari 上运行。-moz-
现在,你也可以在 Mozilla 上测试它(希望在 IE 中也是如此)。 http://jsbin.com/oposof/5
最佳答案
看起来突然是因为默认情况下它的顶部没有边框,然后在悬停时它突然在顶部有边框。所以在 mouseout 中,它所做的不是转换,而是隐藏顶部边框,因为没有初始值可供转换引用。
试试这个:
#container1 > div.triangle {
border-bottom: 80px solid red;
border-top: 0 solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
width: 0px;
height: 0px;
-webkit-transition: all 1.2s ease-in-out;
}
关于css - 为什么我的 CSS 过渡会在鼠标移开时突然结束?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10696481/