javascript - 如何不使用 jQuery 来设置 div 的宽度动画？

Question

下面是我的CSS代码

.page1 {
  width: 0%; }

.page2 {
  width: 0%; }

下面是 jQuery 语法

$('.page2').animate({
        width: "10%"
    });

当我将我的网页从 page1 更改为 page2 时，此页面的一个 div 将更改其宽度，因为此 div 的类更改为 .page2，而原始为 .page1。

使用上面的 jQuery 语法，div 将具有动画效果。

我的问题是，我可以在没有 jQuery 的情况下做同样的事情吗？

我将我的 css 代码更改为:

.page1 {
  width: 0%;
  transition: width 2s; }

.page2 {
  width: 0%;
  transition: width 2s; }

但什么也没发生。

Answer 1

您是说要在页面加载时为 .page1 和 .page1 设置动画吗？如果是，那么您可以引用我使用 css 动画的解决方案。

DEMO

@keyframes animateWidth {
    0% {width: 0%; height: 10px;}
    50% {width: 100%; height: 10px;}
    100% {width: 100%; height: 300px;}
}

只需使用 CSS animate 创建动画，页面加载后动画就会开始。

您不能使用 CSS 转换来控制页面加载动画，据我所知，所有浏览器对此的响应都不同。更安全的解决方案是改用动画。

其他解决方法可以引用这里:

Using CSS for fade-in effect on page load