0

JavaScript で CSS トランジションを開始する方法に関する 5 つのチュートリアルを読みましたが、うまくいきません。サファリを使用しています。これが私のコードです：

<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>
4

1 に答える 1

2

ベンダー プレフィックスを使用する必要がある場合があります。サファリは 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>

デモ

于 2013-01-17T18:03:54.590 に答える