Question

我正在项目中使用Foundation框架＆amp;它的Top Bar导航功能允许在悬停时显示下拉导航。

在悬停事件期间，它会向相关元素添加.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动画有关。

Answer 1

你离标记不远，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;
}

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

1 个答案: