在 javascript 个页面上使用 CSS 淡入淡出

Question

在我的网站上，我有两个链接，如果您点击作品集，div 作品集就会可见。

我用这段代码在它们之间切换<a href="" onclick="return show('portfolio','profile');">

如何使用 CSS 在 div 之间快速淡入淡出？访问我的网站 here，您就会看到。

Answer 1

您将不可见的 div 设置为显示：none。因此，标准 CSS 转换无法开箱即用。

display: none 是个好主意，因为浏览器根本不会花时间呈现该标记。但是，CSS 转换需要 hack 才能处理从显示：none 移动到显示：!none 的元素，因此您有两个选择：

1) 只需使用 CSS 动画代替； add/remove 一个 class 到包含 CSS 动画定义的元素，它将立即播放。

2) 将不可见的 div 设置为高度：0 和不透明度：0；并过渡到不透明度：1 使用常规 CSS 过渡（通常由 class 更改触发）

Answer 2

我创建了一个小演示供您查看并了解 AlexG 在选项 1 中使用 CSS 动画（和 jQuery）的建议。

JSFiddle

代码片段：

var vHome = $("#home"),
  vPortfolio = $("#portfolio"),
  bTriggerHome = $("#trigger-home"),
  bTriggerPortfolio = $("#trigger-portfolio");

function switchView() {
  vHome.add(vPortfolio).toggleClass("hide-view");
};

bTriggerHome.add(bTriggerPortfolio).on("click", function() {
  switchView();
});

#home,
#portfolio {
  height: 500px;
  animation: fadeInUp 1s both;
}
#home {
  background-color: tomato;
}
#portfolio {
  background-color: royalblue;
}
.hide-view {
  display: none;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home">
  <button id="trigger-portfolio">
    Switch View
  </button>
</div>

<div id="portfolio" class="hide-view">
  <button id="trigger-home">
    Switch View
  </button>
</div>

在 javascript 个页面上使用 CSS 淡入淡出

Fade in and out using CSS on javascript multiple pages

javascript

html

css

fade