2

これは、トランジションを実装するための堅実なクロスブラウザーの方法ですか？何が間違っているのかわかりませんか？

フィドル

html：

<div id="sideBar">
    <ul class="sideMenu">
        <li><a href="#">Beat of the Day</a></li>
        <li><a href="#">Cyborg DB</a></li>
        <li><a href="#">Hadiaris.com</a></li>
        <li><a href="#">DriversEd.com</a></li>
        <li>
            <a href="#">Controlco</a>           
            <ul>
                <li><a href="#">GGP</a></li>
                <li><a href="#">TVA</a></li>
            </ul>
        </li>
    </ul>
</div>

css：

.sideMenu a {
    display: block;
    width: 150px;
    padding: 5px 5px 5px 10px;
    margin: 0px 0px 0px 10px;
    border-radius: 50px;
    color: black;
    -moz-transition: color .9s, -moz-transform .9s;
    -webkit-transition: color .9s, -moz-transform .9s;
    -o-transition: color .9s, -moz-transform .9s;
    transition: color .9s, -moz-transform .9s; 
}
.sideMenu a:hover {
    box-shadow: inset 0px 0px 5px 0px black;
    color: blue;
}
4

3 に答える 3

3

, -moz-transform .9s遷移宣言を削除する必要があります。

.sideMenu a {
    display: block;
    width: 150px;
    padding: 5px 5px 5px 10px;
    margin: 0px 0px 0px 10px;
    border-radius: 50px;
    color: black;
    -moz-transition: color .9s;
    -webkit-transition: color .9s;
    -o-transition: color .9s;
    transition: color .9s; 
}
.sideMenu a:hover {
    box-shadow: inset 0px 0px 5px 0px black;
    color: blue;
}
于 2013-03-12T17:53:46.483 に答える
2

あなたのtransform値はすべて-moz-バージョンを使用しています。また、トランジションは、現在の方法で「ホバリングを解除」した場合にのみ機能します。両方のルールにトランジションを追加すると、ホバーでも変換が行われます。

更新されたフィドル

.sideMenu a {
    display: block;
    width: 150px;
    padding: 5px 5px 5px 10px;
    margin: 0px 0px 0px 10px;
    border-radius: 50px;
    color: black;
    -moz-transition: color .9s, -moz-transform .9s;
    -webkit-transition: color .9s, -webkit-transform .9s;
    -o-transition: color .9s, -o-transform .9s;
    transition: color .9s, transform .9s; 
}
.sideMenu a:hover {
    box-shadow: inset 0px 0px 5px 0px black;
    color: blue;

    -moz-transition: color .9s, -moz-transform .9s;
    -webkit-transition: color .9s, -webkit-transform .9s;
    -o-transition: color .9s, -o-transform .9s;
    transition: color .9s, transform .9s;
}
于 2013-03-12T17:53:16.773 に答える
1

あなた-moz-transformは問題を引き起こしています。プロパティをアニメートしたいだけの場合colorは、削除できます。

    -moz-transition: color .9s;
    -webkit-transition: color .9s;
    -o-transition: color .9s;
    transition: color .9s; 
}

デモ： http： //jsfiddle.net/C83Yd/1/

于 2013-03-12T17:54:04.883 に答える