我阅读了有关如何使用JavaScript启动CSS-Transition的5个教程,但它不起作用。 我正在使用Safari。 这是我的代码:
<html>
<head>
<title>Test</title>
<style type="text/css">
#test{
width: 100px;
height: 100px;
background-color: aqua;
transition: width 3s linear;
}
</style>
<script type="text/javascript">
function test(){
document.getElementById('test').style.width = 200+'px';
}
</script>
</head>
<body>
<div id="test">
</div>
<button onclick="test()">Los</button>
</body>
</html>
答案 0 :(得分:2)
您可能需要使用供应商前缀,safari使用webkit,因此请尝试添加-webkit-
前缀。
<style type="text/css">
#test{
width: 100px;
height: 100px;
background-color: aqua;
-webkit-transition: width 3s linear;
-moz-transition: width 3s linear;
transition: width 3s linear;
}
</style>