我定义transition后，有定义一个class（仅仅该变量width），然后用js增加这个class，并没有出现transition定义的动画，但是如果通过或：hover改变width,就有？

为什么？是不是transition动画不能通过js触发？！

@北在北方: 发一下代码吧，最好两种情况的代码都发一下，猜测可能是transition不支持auto值的

@ThreeTree: 

<style>
            #gradientColor{
                width:200px;
                height:200px;
                /*background-image:-moz-linear-gradient(top, red, green);*/
                background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-size:200px 200px;
                background-color:red;
                transition:width 1s ease-in 0s;
            }
            .bigerWidth{
                width:500px;
            }
        </style>
        <script>
            function ChangeWidth()
            {
                try{
                    gradientColor.className = "bigerWidth";
                    console.log(gradientColor.className);
                }catch(e)
                {
                    console.log(e.message);
                }
            }
        </script>
        <div id="gradientColor" onclick="ChangeWidth()"></div>

@ThreeTree: css触发就是把.bigerWidth改成#gradientColor:hover，再去掉js代码

@ThreeTree: 我明白是怎么回事了，transition动画的定义中有关的属性的起始值和结束值必须定义在class中，transition动画的过程定义则可以在class或id中，这样动态添加class增加结束值才能引起属性的变化进而触发transition动画。

@北在北方: 为什么 我把样式卸载css里面 却没有任何效果？？

@21cn: 可以的话，贴代码上来看看

这不是选择器优先级的问题吗，.bigerWidth和#gradientColor都声明了width的话，以#gradientColor为准，所以你写的代码它的width是没有发生改变的，.bigerWidth改成#gradientColor.bigerWidth就行了