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动画制作动画，一旦页面加载，动画就会开始。

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

有关其他解决方法，请参阅此处：

Using CSS for fade-in effect on page load

Answer 2

试试这个：

<强> HTML

<div class="animated">Boca Juniors</div>

<强> CSS

.animated {
  /* just for demo */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 3px solid steelblue;
  background: gold;
  font-weight: bold;
  color: steelblue;

  /* Transition */
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s;
  width: 100%;
}
.animated:hover {
  width: 50%;
}

<强> DEMO

如何不使用jQuery动画div的宽度？

2 个答案: