个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我知道 Stack Overflow 上有许多与此类似的问题，这些问题都可以通过使用 visibility:hidden 而不是 display:none 属性来解决。我遇到的问题是我认为我必须使用 display:none 因为我需要用备用 div 填充隐藏的 div 的空间，visibility:hidden 只会保留那个空间，同时使其不可见。
我的目标:单击+按钮后，nav元素正确淡出。在此动画之后，我有一个 JavaScript 行计算 500 毫秒，然后为褪色的 div 提供一个包含 display:none 的类。
问题是，当单击现在的 - 按钮时，我将元素返回其 display:block 属性，并删除为其提供模糊/淡入淡出效果的类影响。 但是该元素并没有很好的淡入/淡入过渡，而是立即弹回到屏幕上。无动画。
在继续使用 display:none 属性的同时，我不知道如何解决这个问题。 感谢您的帮助，我没有使用任何像 jQuery 这样的库，只是简单的 Javascript。
var expand = document.getElementById("expansion");
function removeElm() {
"use strict";
document.querySelector("nav").classList.add("removed");
document.querySelector("#description").classList.remove("removed");
}
function expandF() {
"use strict";
var navLi = document.querySelectorAll("li"), i;
if (!document.querySelector("nav").classList.contains("out")) {
document.querySelector("nav").classList.add("out");
document.querySelector("body").style.background = "#dff";
document.getElementById("expansion").innerHTML = "-";
document.getElementById("expansion").style.background = "#f00";
for (i = 0; i < navLi.length; i++) {
navLi[i].classList.add("rsHover");
}
setTimeout(removeElm, 500);
} else {
document.querySelector("nav").classList.remove("removed");
document.querySelector("#description").classList.add("removed");
document.querySelector("nav").classList.remove("out");
document.querySelector("body").style.background = "#fff";
document.getElementById("expansion").innerHTML = "+";
document.getElementById("expansion").style.background = "#222";
for (i = 0; i < navLi.length; i++) {
navLi[i].classList.remove("rsHover");
}
}
}
expand.addEventListener("click", expandF);/*///////////////////////////////// __NAV__ /////////////////////////////////*/
nav {
display: inline-block; position: relative; top: 50%; right: 19px;
-webkit-transform: translateY(-50%); transform: translateY(-50%); margin: auto
}
nav ul:after { content: ""; display: block; clear: both } /* << clearfix */
nav ul { font-size: 100%; text-transform: uppercase; margin: 0; padding: 0 }
nav li { width: 150px; height: 150px; list-style: none; float: left; margin: 5px}
nav li:hover { background: #055; color: #eee; cursor:pointer }
nav span {
display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
/*///////////////////////////////// SECTION /////////////////////////////////*/
#description {
display: inline-block; position: relative; top: 50%; right: 19px;
-webkit-transform: translateY(-50%); transform: translateY(-50%); margin: auto
}
/*///////////////////////////////// _MISC__ /////////////////////////////////*/
.removed { display: none !important }
.rsHover:hover { background: #dff }
.out {
-webkit-filter: blur(60px); filter: blur(60px); color: #fff;
-webkit-transform: scale(0.1, 0.9); transform: scale(0.1, 0.9);
-webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 110%;
}
/*///////////////////////////////// _ANIM__ /////////////////////////////////*/
body{ -webkit-transition:2s ease; transition:2s ease }
nav{
-webkit-transition:color 1s ease, -webkit-filter 1s ease, -webkit-transform 1s ease;
transition:color 1s ease, -webkit-filter 1s ease, -webkit-transform 1s ease;
transition:filter 1s ease, color 1s ease, transform 1s ease;
transition:filter 1s ease, color 1s ease, transform 1s ease, -webkit-filter 1s ease,
-webkit-transform 1s ease;
}<head>
<style>
html,body { height: 100%; text-align: center; color: #222; margin: 0 }
#expansion {
float:left; position: relative; top: 50%; -webkit-transform: translateY(-50%);
transform: translateY(-50%); width: 28px; height: 28px; padding: 5px;
margin: auto; color: #666; font-size: 150%
}
#expansion:hover { background: #222; color: #eee; cursor:pointer; }
</style>
</head>
<body>
<div id="expansion">+</div>
<nav>
<ul>
<li><span>one</span>
</li>
<li><span>two</span>
</li>
</ul>
</nav>
<section id="description" class="removed">
<h1>about web</h1>
<p>
WEB is a reference of...
</p>
</section>
</body>最佳答案
您需要在设置 display: block 后强制浏览器渲染该元素，以确保该元素位于文档流中，否则它将不会执行任何转换或动画。使用回流焊:
您的元素当前处于隐藏(显示:无)状态:
<div style="display: none; opacity: 0; transition: opacity 500ms"></div>
JS 使其流畅，然后转换为不透明度:1:
div.style.display = 'block';
div.clientHeight; // Forces the browser to "reflow"
div.style.opacity = 1; // Now the element will transition from opacity: 0 to opacity: 1
其中 div 是 HTMLElement 对象。请注意，opacity 只是一个示例。
我强烈建议您阅读本文以了解更多信息(因为这是一个非常复杂的主题):http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
编辑:将currentHeight更改为clientHeight。
关于javascript - 如何在显示元素后平滑地淡入/淡出:none value，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36854093/
24
4
0
我正在尝试使用 flot 绘制 SQL 数据库中的数据图表，这是使用 php 收集的，然后使用 json 编码的。 目前看起来像: [{"month":"February","data":482},
我有一个来自 php 行的 json 结果，类似于 ["value"]["value"] 我尝试使用内爆函数，但得到的结果是“value”“value” |id_kategori|created_at
脚本 1 将记录 two 但浏览器仍会将 select 元素呈现为 One。该表单还将提交值 one。 脚本 2 将记录、呈现和提交 两个。我希望它们是同义词并做同样的事情。请解释它们为何不同，以及我
我的python字典结构是这样的: ips[host][ip] 每行 ips[host][ip] 看起来像这样: [host, ip, network, mask, broadcast, mac, g
在 C# 中 我正在关注的一本书对设置和获取属性提出了这样的建议: double pri_test; public double Test { get { return pri_test; }
您可能熟悉 enum 位掩码方案，例如: enum Flags { FLAG1 = 0x1, FLAG2 = 0x2, FLAG3 = 0x4, FLAG4 = 0x8
在一些地方我看到了(String)value。在一些地方value.toString() 这两者有什么区别，在什么情况下我需要使用哪一个。 new Long(value) 和 (Long)value
有没有什么时候 var result = !value ? null : value[0]; 不会等同于 var result = value ? value[0] : null; 最佳答案 在此处将
我正在使用扫描仪检测设备。目前，我的条形码的值为 2345345 A1。因此，当我扫描到记事本或文本编辑器时，输出将类似于 2345345 A1，这是正确的条形码值。 问题是: 当我第一次将条形码扫描
我正在读取 C# 中的资源文件并将其转换为 JSON 字符串格式。现在我想将该 JSON 字符串的值转换为键。 例子， [ { "key": "CreateAccount", "text":
我有以下问题: 我有一个数据框，最多可能有 600 万行左右。此数据框中的一列包含某些 ID。 ID NaN NaN D1 D1 D1 NaN D1 D1 NaN NaN NaN NaN D2 NaN
import java.util.*; import java.lang.*; class Main { public static void main (String[] args) thr
我目前正在开发我的应用程序，使其设计基于 Holo 主题。在全局范围内我想做的是工作，但我对文件夹 values、values-v11 和 values-v14. 所以我知道: values 的目标是
我遇到了一个非常奇怪的问题。 我的公司为我们的各种 Assets 使用集中式用户注册网络服务。我们一般通过HttpURLConnection使用请求方法GET向Web服务发送请求，通过qs设置参数。这
查询: UPDATE nominees SET votes = ( SELECT votes FROM nominees WHERE ID =1 ) +1 错误: You can't specify
如果我运行一段代码: obj = {}; obj['number'] = 1; obj['expressionS'] = 'Sin(0.5 * c1)'; obj['c
我正在为我的应用创建一个带有 Twitter 帐户的登录页面。当我构建我的项目时会发生上述错误。 values/strings.xml @dimen/abc_text_size_medium
我在搜索引擎中使用以下 View : CREATE VIEW msr_joined_view AS SELECT table1.id AS msr_id, table1.msr_number, tab
为什么验证会返回此错误。如何解决？ ul#navigation li#navigation-3 a.current Value Error : background-position Too
我有一个数据名如下 import pandas as pd d = { 'Name' : ['James', 'John', 'Peter', 'Thomas', 'Jacob', 'Andr
我是一名优秀的程序员,十分优秀！