将类添加到元素时通过转换动画CSS

我在项目上使用基础框架&它的Top Bar导航功能允许在悬停时显示下拉导航。将类添加到元素时通过转换动画CSS

在悬停事件它增加了一个.hover类相关的元素，因此改变CSS流行进入人们的视线，而不是一个平滑过渡的方式动画。

这让我思考。 是否可以通过转换或类似方式对CSS定义中的更改进行动画处理？

以此为例。这里是我们的默认元素：

<div class="a-box">Some content</div>

而且它的默认CSS：

.a-box { 
    width: 200px; 
    height: 200px; 
    background: red; 
}

悬停框架（我不希望编辑的核心文件，以保持它的清洁更新）增加了hover类。使我们的元素现在这个样子：

<div class="a-box hover">Some content</div>

这里可能是悬停元素一些CSS：

.a-box.hover { 
    width: 400px; 

    // I thought perhaps adding the following would work but it doesn't appear to 

    -webkit-transition: all 200ms ease; 
    -moz-transition: all 200ms ease; 
    -ms-transition: all 200ms ease; 
    transition: all 200ms ease; 
}

我很渴望听到此人POV！我不确定这是否是重复的，但我读过的所有帖子都与某种形式的jQuery动画有关。

来源

2013-11-01 Sheixt

退房[Animate.css（https://daneden.me/animate/） – Johnny

这实际上是非常相似的AngularJS是如何试图实现动画。请参阅http://docs.angularjs.org/api/ngAnimate - 这里可能有一些额外的见解。 – cmw

你离商标不远，here is a working example。

在你的例子，主要错误是，你必须

<div class="my-box hover">Some content</div>

但你的CSS正在寻找a-box不my-box。

作为一种习惯，我通常在元素的最简单的（最一般的）选择器上定义动画，然后任何额外的选择器都会从中受益。

.my-box { 
    width: 200px; 
    height: 200px; 
    background: red; 
    -webkit-transition: all 200ms ease; 
    -moz-transition: all 200ms ease; 
    -ms-transition: all 200ms ease; 
    transition: all 200ms ease; 
} 

.my-box.hover { 
    width: 400px; 
}

来源

2013-11-01 17:13:00 Fenton

啊，我的错误，那是一个type-o。我上面写的是一个概念的解释，而不是真实的代码（我编辑过类名）。真正的问题似乎在于我在与原始状态相反的'.a-box.hover'声明中包含了我的转换。 – Sheixt

将类添加到元素时通过转换动画CSS

回答

相关问题