如何在我的情况下创建动画？

Question

我正在尝试为我的元素创建一个过渡。我看到的所有示例都使用:hover状态。但是，当我点击链接时，我需要触发转换。

这是我的HTML

HTML

<a id='fireme' href=''>FIRE</a>
<div id='test'> Test title 1</div>

CSS

#test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px;
}

JS

$('#fireme').click(function(){
    $('#test').addClass('newWidth')
})

然而，当我点击链接时，根本没有任何反应，宽度仍然保持为150px

任何人都可以帮我解决这个问题吗？谢谢！

Answer 1

那是因为CSS style rules cascade order。

在您的情况下，带标识符的样式规则的优先级高于带有类的规则。

如果您想在第一手使用课程，那么您将获得所需的课程。

在您的HTML中，添加类属性

<a id='fireme' href=''>FIRE</a>
<div id='test' class='test'> Test title 1</div>

在CSS更改规则中

.test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px;
}

在行动http://jsfiddle.net/36BkX/

中查看

否则，您需要提升CSS规则的优先级

#test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px !important;
}

现在休息吧