javascript - CSS3 转换似乎需要 "warmup"时间才能开始？我必须加等待吗？-6ren

javascript - CSS3 转换似乎需要 "warmup"时间才能开始？我必须加等待吗？

转载作者：行者123 更新时间：2023-11-28 09:01:21

26

4

我有一个 CSS3 过渡，我在其中缩小了元素的高度。我这样做是:

类中指定的 CSS3 过渡和目标高度(例如类中的高度:5 像素)
将 height=$el.height() 分配给 style 属性中的元素(例如 height:100px on style)
给元素添加类
移除样式属性中定义的高度
计算出的 CSS 值从样式的 100px 变为类的 5px，这会触发转换

我发现设置 CSS3 转换触发器似乎有延迟，如果在步骤 #3 之后太快完成步骤 #4，触发器将看到高度最初是自动的而不是 100px，并且没有过渡发生(由于 CSS3 的另一个限制，您不能从 height:auto 过渡到 height:x)。

这是实际的代码:

$(document).ready(function() {
  $a = $('#box'); // height:auto, not specified
  $a.css('height',$a.height()); // height:100px on style;
  $a.addClass('shrink'); // height:100px on style, height:5px on class
  $a.css('height',''); // height removed from style, falls back to 5px on class
});

这是一个演示问题的 JSFiddle:http://jsfiddle.net/1escyLqf/2/

在 fiddle 中，如果我在删除高度值之前添加 20 毫秒的延迟，则过渡有效。如果您注释掉该行并在添加类后立即调用 css('height','')，则速度太快并且不会发生转换。

这是浏览器实现 CSS3 转换的错误吗？或者我真的需要添加超时吗？

最佳答案

使用附加在 jQuery 中的具有动态起始高度的 CSS3 动画创建此对象。

jQuery

获取框的高度:
```
var boxHeight = $('#box').height();
```

创建动画并将其应用于收缩类。从变量中获取起始高度。

var animation = '
<style type="text/css">
    .shrink { 
       -webkit-animation: shrink 12s forwards; 
       animation: shrink 12s forwards; 
     } 

     @-webkit-keyframes shrink { 
         0% { 
            height:' + boxHeight + 'px; 
            } 
         100% { 
            height: 5px; 
         } 
     } 
     @keyframes shrink { 
         0% { 
            height:' + boxHeight + 'px; 
            } 
         100% { 
            height: 5px; 
         } 
     }
</style>';

将样式附加到 <head>
```
$('head').append(animation);
```

完整示例

$(document).ready(function() {
  var boxHeight = $('#box').height();
  
  var animation = '<style type="text/css"> .shrink { -webkit-animation: shrink 12s forwards; animation: shrink 12s forwards; } @-webkit-keyframes shrink { 0% { height:' + boxHeight + 'px; } 100% { height: 5px; } } @keyframes shrink { 0% { height:' + boxHeight + 'px; } 100% { height: 5px; } }</style>';
  
  $('head').append(animation);
});

#box,
#box2 {
  background: red;
  margin: 10px;
}
.shrink {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="box" class="shrink">
  <p>make height</p>
  <p>make height</p>
  <p>make height</p>
  <p>make height</p>
</div>

关于javascript - CSS3 转换似乎需要 "warmup"时间才能开始？我必须加等待吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26900325/

26

4

0

文章推荐： javascript - 在单个单词内插入文本。独特的情况

文章推荐：快速进度 View 完成操作

文章推荐： javascript - 在移动设备上禁用粘性导航

文章推荐： html - 响应式全屏 html5 视频

java - 在finally{}中捕获异常？必须？
我感到困惑...... 我在 .jsp 中编写了一个小例程。最后需要关闭ResultSet、Statement和Connection。我也在finally { }中编写了结束代码，但是当页面运行时，它
c - 必须(应该)避免使用标准库中的哪些函数？
我在 Stack Overflow 上读到一些 C 函数是“过时的”或“应该避免”。你能给我一些这种功能的例子以及原因吗？这些功能有哪些替代方案？我们可以安全地使用它们 - 有什么好的做法吗？最
java - x 必须 < bitmap.width()
我正在构建一个应用程序，它可以拍照、显示图片，然后一旦被点击，就会在点击的任何地方返回图片的颜色。它在崩溃之前到达了水龙头。我得到 x 必须是 < bitmap.width() 的错误就我的理解而
elasticsearch - Elastic Search 必须 + 至少一个过滤器查询中的 SHOULD
我试图根据几个因素向用户提出建议: •建议只能是同一所大学的学生•建议必须至少匹配一个其他字段我以为我有它，但问题是这个查询将返回同一所学校的所有学生，而不管其他情况: PUT /user/.per
python - 我*必须*在我的数据库中存储第三方凭证。最好的办法？
我的应用程序必须从第三方读取 SSL 网址。我如何最好地将第三方凭证存储在我自己的数据库中，以保护第三方凭证不被泄露？兼顾绝对的安全性和实用性。对凭据进行单向哈希处理没有用，因为我必须将凭据恢复为明文
ruby-on-rails - 必须 to_json 以字符串形式返回一个 mongoid
在我的 Rails API 中，我希望 Mongo 对象作为 JSON 字符串返回，Mongo UID 作为“id”属性而不是“_id”对象。我希望我的 API 返回以下 JSON: { "
c - 服务器多线程，协议(protocol)必须？和更多
假设应用层协议(protocol)是通过UDP实现的。客户端需要超时，因此服务器需要保留与其通信的每个客户端的状态。还假设使用了select。实现多线程服务器总是最好的吗？我认为链接列表也会做同样
java - 当 GC 不(必须)运行并且程序完成执行时会发生什么？
考虑一个非常短的程序，我在其中分配了一点内存。我被告知，GC 在程序分配大量内存并且分配达到限制的情况下运行。我不知道这个限制到底是多少，但我认为它必须足够高，这样 GC 才不会频繁运行并减慢程序的
iphone - 究竟什么时候*必须*应用程序包含 Reachability 类来测试网络可达性？
根据 Cocoa with Love当应用程序需要 WiFi(而不是蜂窝网络)时需要可达性，例如如果应用加载大量视频并且不适合在 3G 网络上使用。我的应用程序使用互联网，无论是 WiFi 还是 3
javascript - jQuery 悬停缩略图，但需要时间更新主镜头，必须 catch
我正在寻找更好的解决方案来解决我面临的这个问题。如果您将鼠标悬停在缩略图上，它会淡出较大的镜头并淡入新的镜头，这很好，但是当转到目标缩略图并且您的鼠标再悬停一些时，它会更改为您的鼠标经过并拍摄的其他
windows - 高完整性 token 是否*必须*启用管理员组？
启用 UAC 并使用管理帐户登录后，您将获得两个 token : 提升的 token ；这已启用 Administrators 组，具有高完整性(即强制性完整性标签 SID 为 S-1-16-1228
reactjs - 我是否*必须*展平 React.JS 中的所有分层组件声明？
我想知道在 React 中创建动态选择组件的规范方法是什么。我是否必须创建一个单独的组件来根据下面的代码返回选项，以便能够通过每个条目的 props 自定义值，然后将它们包含到单独的选择组件中？ p>
Datagrid 分页 : Invalid CurrentPageIndex value. 必须 >= 0
我有一个启用了分页的数据网格。我根据过滤条件在数据网格中显示结果。我已经过滤了数据，现在有 2 页。当我转到第二页时。我正在再次执行搜索功能以缩小结果范围。然后我收到类似“无效的 CurrentPag
postgresql - Postgres-必须 to_timestamp() 忽略/不读取日期/时间字符串中间的特定字符
我有原始文本列，其值类似于“2012-07-26T10:33:34”和“2012-07-26T10:56:16”。在使用 Joda-Time 的 Java 中，我可以通过调用轻松地将其转换为日期/从
html - 可以使 div 到达顶部的某个点吗？必须 react 灵敏
您好，我被分配了一项棘手的任务。我需要让一个方形 div 到达顶部的一个点。基本上它看起来像一个正方形 div，顶部有一个宽三 Angular 形。请参阅下面的屏幕截图。顶部的深蓝色只是堆叠在白色 d
android - 为什么我们(必须)使用不同的启动器图标(xhdpi、hdpi 等)
我想知道，为什么我们在 android 中使用不同的启动器图标(大小)。目前您“必须”将图标大小调整为: LDPI - 36 x 36 MDPI - 48 x 48 HDPI - 72 x 72 XH
c++ - 必须 "ask which exact type an object has"是否总是表示设计不好？
在 SO 的几个地方，声称必须知道对象的确切类型并基于此做出决定(以 if-then-else 方式)指向一个设计缺陷，例如here . 我想知道是否总是如此。在当前的一个小型教育项目(我正在使用它来
c++ - 为什么(必须)从 std::iterator 继承？
据我了解，迭代器是一种为客户端提供接口(interface)以观察/迭代/传递自定义集合等内容的机制，而不破坏信息隐藏原则。 STL 容器有自己的迭代器，所以我们可以毫无问题地对它们使用 for (
html - go - 调用 "html/template"时没有足够的参数。必须
我在 Golang 中编写了一个包装函数，用于从多个文件中渲染模板，如下所示: func RenderTemplate(w http.ResponseWriter, data interface{},
c++ - 必须 size() == end() - begin()？ Actor 阵容呢？
据我了解，size_type 和 difference_type 的目的不仅仅是符号——它也是为了解决例如分段架构等，它们可能具有不同的大小。在这种情况下，如果我有一个带有随机访问迭代器的容器，那么

首页

博学

6Ren·AI

商城