草庐IT

javascript - 动画等待执行

coder 2024-12-31 原文

我正在尝试使用 CSS 为元素高度设置动画。我这样做的方式是，我向一个元素添加了一个触摸事件。该函数将 className 添加到应该隐藏的元素，即高度为 0。

问题是，当元素被点击时，本应获得 0 高度的 div 暂停了一秒钟，然后获得了所需的高度。似乎动画持续时间越长，它在动画之前等待的时间就越长。

相关代码如下:

transition: max-height 2s ease-in-out;

JSFiddle 

var heading = document.getElementById('heading'),
  body = document.getElementById('body');

heading.addEventListener('click', hide);
body.addEventListener('transitionend', hideCallback);

function hide() {
  body.className = 'hide';
}

function hideCallback(e) {
  console.log(e.propertyName);
}
#wrapper {
  margin: auto;
  background-color: blue;
  width: 470px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
  max-height: 400px;
  max-width: 600px;
  padding: 0;
}
#buttonContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  margin: auto;
  width: 100px;
  height: 100px;
  color: white;
}
#buttonIcon {
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 35px;
  font-weight: bold;
  display: inline-block;
}
#buttonLabel {
  font-size: 20px;
}
#content {
  width: 100%;
  height: 100%;
  text-align: left;
  transform: translateY(0px);
}
#heading {
  color: white;
  text-align: right;
  margin: 10px;
  font-size: 17px;
}
#body {
  color: #000;
  color: rgba(0, 0, 0, 0.87);
  background-color: #FFF;
  width: 100%;
  max-height: 500px;
  padding: 10px 0;
  box-sizing: border-box;
}
#body.hide {
  transition: max-height 2s ease-in-out;
  max-height: 0;
}
#innerBody {
  height: 200px;
  background-color: orange;
}
<div id="wrapper">
  <div id="buttonContainer"><span id="buttonIcon">My</span><span id="buttonLabel">self</span>
  </div>
  <div id="content">
    <div id="heading">Press Me</div>
    <div id="body">
      <div id="innerBody"></div>
    </div>
  </div>
</div>

最佳答案

您正在为 max-height 而不是 height 设置动画。为 max-height 设置动画是一个技巧，用于为高度未知的元素设置高度动画。您声明了一个非常大的 max-height，只要未知高度小于 max-height，它就可以工作。唯一的缺点是，由于您为大于实际高度的东西设置动画，因此会有延迟。在这种情况下，您的 max-height 为 500px，而高度(包括填充)仅为 220px，这意味着有更多的时间(~1.1 秒)只是将 max-height 减小到 220px ，当它到达那里时，视觉开始动画。

如果像这个例子一样，您知道元素的实际高度(220 = padding 10 + innerBody 高度 200)，您可以为确切的高度设置动画。

如果您事先不知道高度，请尝试降低 max-height 估计值并使用快速启动的缓动，例如 ease-out 或使用 javascript设置开始和结束高度。

已知高度:220px(在全屏中观看):

var heading = document.getElementById('heading'),
  body = document.getElementById('body');

heading.addEventListener('click', hide);
body.addEventListener('transitionend', hideCallback);

function hide() {
  body.className = 'hide';
}

function hideCallback(e) {
  console.log(e.propertyName);
}
#wrapper {
  margin: auto;
  background-color: blue;
  width: 470px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
  max-height: 400px;
  max-width: 600px;
  padding: 0;
}
#buttonContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  margin: auto;
  width: 100px;
  height: 100px;
  color: white;
}
#buttonIcon {
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 35px;
  font-weight: bold;
  display: inline-block;
}
#buttonLabel {
  font-size: 20px;
}
#content {
  width: 100%;
  height: 100%;
  text-align: left;
  transform: translateY(0px);
}
#heading {
  color: white;
  text-align: right;
  margin: 10px;
  font-size: 17px;
}
#body {
  color: #000;
  color: rgba(0, 0, 0, 0.87);
  background-color: #FFF;
  width: 100%;
  height: 220px;
  padding: 10px 0;
  box-sizing: border-box;
}
#body.hide {
  transition: height 2s ease-in-out;
  height: 0;
}
#innerBody {
  height: 200px;
  background-color: orange;
}
<div id="wrapper">
  <div id="buttonContainer"><span id="buttonIcon">My</span><span id="buttonLabel">self</span>
  </div>
  <div id="content">
    <div id="heading">Press Me</div>
    <div id="body">
      <div id="innerBody"></div>
    </div>
  </div>
</div>

使用 javascript 的未知高度 - 在动画开始前设置实际高度，等待下一帧，并将其更改为 0(在全屏中观看):

var heading = document.getElementById('heading'),
  body = document.getElementById('body');

heading.addEventListener('click', hide);
body.addEventListener('transitionend', hideCallback);

function hide() {
  body.style.height = body.scrollHeight + 'px'; /** sample actual height, and set it on element **/
  requestAnimationFrame(function() { // wait for next frame
    body.style.height = 0; // change height to 0
  });
}

function hideCallback(e) {
  console.log(e.propertyName);
}
#wrapper {
  margin: auto;
  background-color: blue;
  width: 470px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
  max-height: 400px;
  max-width: 600px;
  padding: 0;
}
#buttonContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  margin: auto;
  width: 100px;
  height: 100px;
  color: white;
}
#buttonIcon {
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 35px;
  font-weight: bold;
  display: inline-block;
}
#buttonLabel {
  font-size: 20px;
}
#content {
  width: 100%;
  height: 100%;
  text-align: left;
  transform: translateY(0px);
}
#heading {
  color: white;
  text-align: right;
  margin: 10px;
  font-size: 17px;
}
#body {
  color: #000;
  color: rgba(0, 0, 0, 0.87);
  background-color: #FFF;
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  transition: height 2s ease-in-out;
}

#innerBody {
  height: 200px;
  background-color: orange;
}
<div id="wrapper">
  <div id="buttonContainer"><span id="buttonIcon">My</span><span id="buttonLabel">self</span>
  </div>
  <div id="content">
    <div id="heading">Press Me</div>
    <div id="body">
      <div id="innerBody"></div>
    </div>
  </div>
</div>

关于javascript - 动画等待执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36705052/

javascript动画heightcodepxcssanimation

有关javascript - 动画等待执行的更多相关文章

  1. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  2. ruby - Chef 执行非顺序配方 - 2

    我遵循了教程http://gettingstartedwithchef.com/,第1章。我的运行list是"run_list":["recipe[apt]","recipe[phpap]"]我的phpapRecipe默认Recipeinclude_recipe"apache2"include_recipe"build-essential"include_recipe"openssl"include_recipe"mysql::client"include_recipe"mysql::server"include_recipe"php"include_recipe"php::modul

  3. ruby - 为什么 Ruby 的 each 迭代器先执行？ - 2

    我在用Ruby执行简单任务时遇到了一件奇怪的事情。我只想用每个方法迭代字母表，但迭代在执行中先进行:alfawit=("a".."z")puts"That'sanalphabet:\n\n#{alfawit.each{|litera|putslitera}}"这段代码的结果是:(缩写)abc⋮xyzThat'sanalphabet:a..z知道为什么它会这样工作或者我做错了什么吗？提前致谢。 最佳答案 因为您的each调用被插入到在固定字符串之前执行的字符串文字中。此外，each返回一个Enumerable，实际上您甚至打印它。试试

  4. ruby - 检查是否通过 require 执行或导入了 Ruby 程序 - 2

    如何检查Ruby文件是否是通过“require”或“load”导入的，而不是简单地从命令行执行的？例如:foo.rb的内容:puts"Hello"bar.rb的内容require'foo'输出:$./foo.rbHello$./bar.rbHello基本上，我想调用bar.rb以不执行puts调用。 最佳答案 将foo.rb改为:if__FILE__==$0puts"Hello"end检查__FILE__-当前ruby​​文件的名称-与$0-正在运行的脚本的名称。 关于ruby-检查是否

  5. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  6. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  7. ruby-on-rails - rbenv:从 RVM 移动到 rbenv 后，在 Jenkins 执行 shell 中找不到命令 - 2

    我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions

  8. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  9. ruby-on-rails - Rake 任务仅调用一次时执行两次 - 2

    我写了一个非常简单的rake任务来尝试找到这个问题的根源。namespace:foodotaskbar::environmentdoputs'RUNNING'endend当在控制台中执行rakefoo:bar时，输出为:RUNNINGRUNNING当我执行任何rake任务时会发生这种情况。有没有人遇到过这样的事情？编辑上面的rake任务就是写在那个.rake文件中的所有内容。这是当前正在使用的Rakefile。requireFile.expand_path('../config/application',__FILE__)OurApp::Application.load_tasks这里

  10. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2

    在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

随机推荐