不能应用 :not() 来包含 div 容器

Question

我正在尝试淡入屏幕上除图像之外的所有内容。我希望图像transform: scales(); 更大，而不是回到原始大小。我有两个容器框，其中包含一些文本和一个我想在图像之后全部淡入的表单。

我可以让图像设置动画，然后其他所有内容都会淡入，但 div 容器本身不会设置动画。所以屏幕上会出现两个空框，图片动画，然后div的内容淡入。

这是我的代码：

.fadeIn :not(#ipad) {
  -webkit-animation: fadeIn 3s ease;
  -moz-animation: fadeIn 3s ease;
  -ms-animation: fadeIn 3s ease;
  -o-animation: fadeIn 3s ease;
  animation: fadeIn 3s ease;
}

<div class="title fadeIn" id="title"><b>Curriculum and Instruction iPad Setup</b></div>
<div class="info-container fadeIn" id="info-container">
  <img src="img/IPad_3.png" id="ipad">
  <form action="login_complete.php" method="post" id="loginForm">
    <div class="campus-container">
      <input type="radio" name="campus" value="STE" /><span><b>Stephenville</b></span>
      <input type="radio" name="campus" value="FTW" /><span><b>Fort Worth</b></span>
    </div>
    <input type="submit" value="Submit" onclick="loadingSpinner();" />
  </form>
</div>

当我取消:not(#ipad) 时，包括图像在内的所有内容都会一起淡入。我希望图像不会在动画中出现淡入淡出。

我查看了here，但这似乎不起作用。我也找到了this，但也没找到。

已编辑：

很抱歉没有足够的css代码：

淡入

@keyframes fadeIn {
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

图像动画

@keyframes zoomOut {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    50% {
        -webkit-transform: scale(5);
        -moz-transform: scale(5);
        -ms-transform: scale(5);
        -o-transform: scale(5);
        transform: scale(5);
    }
    100% { }
}

Answer 1

如果你嵌套<img src="img/IPad_3.png" id="ipad">
里面<div class="info-container fadeIn" id="info-container">
你不应该期望它会起作用。

仅此而已。你必须重新考虑你的文档结构。

此外，css 不允许您编写前瞻表达式，因此您别无选择，只能更改文档结构。

---

修复它的一种方法是：

将 info-container div 更改为：
<div class="info-container fadeIn iPad" id="info-container">

并将 css 从 .fadeIn :not(#ipad) 更改为 .fadeIn:not(.iPad)

或者只是从该 div 中删除 fadeIn。

---

您也可以将您的 css 选择器更改为：.fadeIn {

并将您的 html 更改为：

<div class="title fadeIn" id="title"><b>Curriculum and Instruction iPad Setup</b></div>
<div class="info-container" id="info-container">
  <img src="img/IPad_3.png" id="ipad">
  <form action="login_complete.php" class="fadeIn" method="post" id="loginForm">
    <div class="campus-container">
      <input type="radio" name="campus" value="STE" /><span><b>Stephenville</b></span>
      <input type="radio" name="campus" value="FTW" /><span><b>Fort Worth</b></span>
    </div>
    <input type="submit" value="Submit" onclick="loadingSpinner();" />
  </form>
</div>