1

我在一个项目中使用 Foundation 框架，它的顶部栏导航功能允许下拉导航出现在悬停时。

在悬停事件期间，它会.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;
}

我很想听听其他人对此的看法！我不确定这是否是重复的，但我读过的所有帖子都与某种形式的 jQuery 动画有关。

4

1 回答 1

1

您离题不远，这是一个工作示例。

您示例中的主要错误是您有

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

但是您的 CSS 正在寻找a-boxnot 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-01T17:13:00.710 回答