正文 

当前位置： 首页 > 知识 >

将 jQuery 缓动 easeInExpo 函数重写为普通的 javascript 和 css

     2023-03-06     143

关键词：

【中文标题】将 jQuery 缓动 easeInExpo 函数重写为普通的 javascript 和 css【英文标题】：Rewrite jQuery easing easeInExpo function into plain javascript & css 【发布时间】：2021-11-22 17:54:39 【问题描述】：

所以我有这个很棒的小代码块，我正在尝试在没有 jQuery 的情况下将其重写为纯 JavaScript 和 CSS。

jQuery.extend(jQuery.easing,
    easeInExpo: function (x, t, b, c, d) 
        return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
    
); 

var nset = false;
$('button#hmenu').click(function()
    if(!nset)
        $('ul#nav').delay(35).slideDown(300,'easeInExpo');
        $('button#hmenu').addClass('active');
        nset = true;
     else 
        $('ul#nav').slideUp(550);
        nset = false;
        $('button#hmenu').removeClass('active');
    
)

我正在查看一些使用缓动的 CSS 过渡，但只是想知道有哪些选项？在我的代码中，我有一个 slideDown 和 up 缓动函数。这在生产中用于移动菜单导航。

【问题讨论】：

使用 Google 很容易找到这些选项：CSS3 equivalent to jQuery slideUp and slideDown?、Need help changing from jquery to vanilla javascript。你有自己尝试过的 CSS 吗？ 我的问题是专门针对easeInExpo 自定义功能，而不仅仅是上下滑动 当然，您可以使用该问题的答案作为您自己的实验解决问题的平台。目前，您正在请回答问题的志愿者为您对 jQuery 动画进行逆向工程，这似乎要求很多。 是的，这就是我要的帮助，帮助您朝哪个方向前进。如果您不想提供帮助，那很好，但可能还有其他人处理过与我类似的问题。 @drooh 我在更复杂的示例旁边添加了一个简化示例，以显示频谱的两端。因为您可能并不总是知道您正在处理的内容的内部高度，我们可以使用一点 JavaScript 来检索和存储可扩展内容区域的内部高度，然后在浏览器调整大小时随时刷新这些值. 【参考方案1】：

更新：

This github repo（你不需要 jQuery）有一个非常全面的常用 jQuery 函数列表，全部用原生 Javascript 重写。

它包括动画、查询选择器、ajax、事件和其他高级 jQuery 功能。

稍微老一点的youmightnotneedjquery.com也很好，特别是如果你需要支持老的IE版本的话。

您可以使用this website提供的以下CSS实现easeInExpo风格的动画：

transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);

以下示例说明了 div 的 height 上的缓动属性。我已对其进行了更新，以匹配您在 jQuery 中添加的单击延迟（35 毫秒）、时间（分别为 300 毫秒和 550 毫秒）以及 jQuery 的默认缓动（'swing'）——由this 答案提供——当它是关闭：

let expandable = document.getElementById('expandable');
let expandButton = document.getElementById('expand-button');

expandButton.addEventListener('click', () => 
  expandable.classList.toggle('expanded');
);
#expandable 
  background: red;
  transition: all 550ms cubic-bezier(.02, .01, .47, 1);
  height: 0px;
  width: 100px;
  transition-delay: 0ms;


#expandable.expanded 
  height: 100px;
  transition-delay: 35ms;
  transition: all 300ms cubic-bezier(0.950, 0.050, 0.795, 0.035);

<div id="expandable"></div>
<br />
<button id="expand-button">Toggle expand</button>

【讨论】：

这看起来很不错，我会试着整理一个更完整的例子，谢谢！ 我添加了几个链接，应该涵盖您正在寻找的内容。 谢谢，jQuery 可以很好地让复杂的东西变得干净。优雅而简单。看起来绝大多数 jQuery 已经过时了，但只有少数更复杂的块可以使用 CSS 选项和 JavaScript 选项以各种方式进行翻译。 如果您只需要支持 (IE11+) 较新的浏览器，您可能需要查看 cash 库。它具有 jQuery 的许多特性（并共享其语法），但只有 jQuery 的 10% 左右。 补充一点——如果你想为动画走 CSS 路线Animate.css 会让生活变得更轻松。 velocity 使用与 jQuery 的 animate 相同的 API，但通常性能更高。【参考方案2】：

这里需要一点魔法才能让您的可折叠组件展开到可变高度。如果您只是每次都扩展到相同的高度，比如 100 像素，那么这很简单，只需创建一个单独的类（例如“expanded”），然后将该类作为布尔开关添加和删除。

我们仍将使用布尔开关来实现可变高度，但我们还需要使用 JavaScript 获取每个可展开元素的高度，然后在用户窗口大小发生变化时刷新这些高度值文本换行、图像大小调整等。

我们可以很简单地使用自定义 CSS 属性（变量），将回退值设置为unset，这意味着当可变高度存在时，框将展开以显示所有内容而不作为最后的动画，但在大多数情况下（以及所有现代浏览器），自定义 CSS 变量应该是每个部分唯一值的理想解决方案。

这里正在运行（下图），带有切换和手风琴示例，三次贝塞尔曲线缓动函数用于与您在原始问题中提供的 easeInExpo 函数非常匹配。我从easings.net/en#easeInExpo 中提取了这个缓动函数cubic-bezier(0.95, 0.05, 0.795, 0.035)，在那里他们为easeInExpo 和许多其他函数提供了纯CSS 缓动。

简单示例

const expandables = document.querySelectorAll('.expandable');
const setInnerHeights = () => 
  for (const expandable of expandables) 
    expandable.style.setProperty('--inner-height', Array.from(expandable.children).map(child => child.offsetHeight).reduce((a, c) => a + c, 0) + 'px');
  
;
setInnerHeights();
document.addEventListener('click', e => 
  if (e.target?.matches('.expand-trigger')) 
    const expandable = e.target.nextElementSibling;
    expandable.classList[expandable.classList.contains('expanded') ? 'remove' : 'add']('expanded');
  
);
window.addEventListener('resize', setInnerHeights);
html 
  height: 100%;
  box-sizing: border-box;

*, *::before, *::after 
  box-sizing: inherit;

body 
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100%;
  padding: 20px;

.expandable 
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.95, 0.05, 0.795, 0.035);
  text-align: left;

.expandable > p 
  margin: 0;
  padding: 10px 0;

.expandable.expanded 
  --content-height: calc(var(--inner-height) + 20px);
  max-height: var(--content-height, unset);

<button class="expand-trigger">Expand #1</button>
<div class="expandable">
  <p>Lorem ipsum dolor sit amet.</p>
</div>
<button class="expand-trigger">Expand #2</button>
<div class="expandable">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
</div>
<button class="expand-trigger">Expand #3</button>
<div class="expandable">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
  <p>Integer convallis lectus eu felis bibendum, vel lacinia metus imperdiet. Maecenas vulputate, quam vitae tempus pretium, erat felis euismod risus, nec blandit leo mi eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at neque laoreet, egestas dui ut, bibendum lorem. Maecenas elementum odio a congue facilisis. Vivamus risus urna, vestibulum egestas sem nec, lacinia volutpat metus. Suspendisse potenti. Suspendisse ullamcorper commodo libero, sed rhoncus nibh porta in. Donec mi felis, posuere luctus varius ac, faucibus vitae erat.</p>
</div>

复杂示例

const initAccordions = () => 
  const getNode = selector => document.querySelector(selector),
      getNodes = selector => Array.from(document.querySelectorAll(selector)),
      findChildren = (node, selector) => Array.from(node.children).filter(e => e.matches?.(selector)),
      findChild = (node, selector) => Array.from(node.children).find(e => e.matches?.(selector)),
      _addInput = (node, position, id, checked) => node.insertAdjacentHTML(position, `<input type="radio" name="accordion-$id"$checked ? ' checked="checked"' : ''>`),
      setInnerHeight = node => 
        const height = Array.from(node.children).map(child => child.offsetHeight).reduce((a, c) => a + c, 0) + 'px';
        node.style.setProperty('--inner-height', height);
      ,
      accordions = Array.from(document.querySelectorAll('.accordion'));
  let accordionIndex = 0;
  for (const accordion of accordions) 
    const isToggle = accordion.dataset?.type === 'toggle',
        panels = findChildren(accordion, '.accordion--panel');
    let panelIndex = 0;
    for (const panel of panels) 
      const title = findChild(panel, '.accordion--panel--title'),
          content = findChild(panel, '.accordion--panel--content'),
          addInput = (node, position, checked) => _addInput(node, position, accordionIndex + (isToggle ? '-' + panelIndex : ''), checked);
      setInnerHeight(content);
      addInput(title, 'beforebegin');
      addInput(title, 'afterbegin', true);
      panelIndex++;
    
    accordionIndex++;
  
  window.addEventListener('resize', () => 
    const panelContents = Array.from(document.querySelectorAll('.accordion > .accordion--panel > .accordion--panel--content'));
    for (const content of panelContents) setInnerHeight(content);
  );
;
initAccordions();
html 
  height: 100%;
  box-sizing: border-box;

*, *::before, *::after 
  box-sizing: inherit;

body 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100%;
  padding: 20px;

.accordion--panel > [type=checkbox],
.accordion--panel > [type=radio], .accordion--panel--title > [type=checkbox],
.accordion--panel--title > [type=radio] 
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;

.accordion--panel > [type=checkbox]:checked,
.accordion--panel > [type=radio]:checked, .accordion--panel--title > [type=checkbox]:checked,
.accordion--panel--title > [type=radio]:checked 
  display: none;

.accordion--panel 
  border-radius: 7px;

.accordion--panel--title 
  background-color: #ccc;

.accordion--panel--content 
  box-shadow: inset 0 0 0 2px #ccc;
  border-radius: 0 0 7px 7px;

.accordion 
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 500px;

.accordion--panel 
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;

.accordion--panel > [type=checkbox],
.accordion--panel > [type=radio] 
  z-index: 1;

.accordion--panel--title, .accordion--panel--content 
  padding-inline: 15px;

.accordion--panel--title 
  position: relative;
  padding-block: 10px;

.accordion--panel--content 
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.95, 0.05, 0.795, 0.035);

.accordion--panel--content--inner > p:first-child 
  margin-top: 10px;

.accordion--panel--content--inner > p:last-child 
  margin-bottom: 10px;

[type=checkbox]:checked ~ .accordion--panel--content, [type=radio]:checked ~ .accordion--panel--content 
  --content-height: calc(var(--inner-height) + 20px);
  max-height: var(--content-height, unset);

<h2>Accordion Demo</h2>
<div class="accordion" data-type="accordion">
  <div class="accordion--panel">
    <div class="accordion--panel--title">Title #1</div>
    <div class="accordion--panel--content">
      <div class="accordion--panel--content--inner">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </div>
  <div class="accordion--panel">
    <div class="accordion--panel--title">Title #2</div>
    <div class="accordion--panel--content">
      <div class="accordion--panel--content--inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
      </div>
    </div>
  </div>
  <div class="accordion--panel">
    <div class="accordion--panel--title">Title #3</div>
    <div class="accordion--panel--content">
      <div class="accordion--panel--content--inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
        <p>Integer convallis lectus eu felis bibendum, vel lacinia metus imperdiet. Maecenas vulputate, quam vitae tempus pretium, erat felis euismod risus, nec blandit leo mi eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at neque laoreet, egestas dui ut, bibendum lorem. Maecenas elementum odio a congue facilisis. Vivamus risus urna, vestibulum egestas sem nec, lacinia volutpat metus. Suspendisse potenti. Suspendisse ullamcorper commodo libero, sed rhoncus nibh porta in. Donec mi felis, posuere luctus varius ac, faucibus vitae erat.</p>
      </div>
    </div>
  </div>
</div>
<h2>Toggle Demo</h2>
<div class="accordion" data-type="toggle">
  <div class="accordion--panel">
    <div class="accordion--panel--title">Title #1</div>
    <div class="accordion--panel--content">
      <div class="accordion--panel--content--inner">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </div>
  <div class="accordion--panel">
    <div class="accordion--panel--title">Title #2</div>
    <div class="accordion--panel--content">
      <div class="accordion--panel--content--inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
      </div>
    </div>
  </div>
  <div class="accordion--panel">
    <div class="accordion--panel--title">Title #3</div>
    <div class="accordion--panel--content">
      <div class="accordion--panel--content--inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
        <p>Integer convallis lectus eu felis bibendum, vel lacinia metus imperdiet. Maecenas vulputate, quam vitae tempus pretium, erat felis euismod risus, nec blandit leo mi eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at neque laoreet, egestas dui ut, bibendum lorem. Maecenas elementum odio a congue facilisis. Vivamus risus urna, vestibulum egestas sem nec, lacinia volutpat metus. Suspendisse potenti. Suspendisse ullamcorper commodo libero, sed rhoncus nibh porta in. Donec mi felis, posuere luctus varius ac, faucibus vitae erat.</p>
      </div>
    </div>
  </div>
</div>

easings.net 提供其他 CSS 缓动功能。

您还可以使用 Chrome 的 DevTools 以可视方式自定义您的缓动功能，方法是将 transition 或 transition-timing-function 属性添加到值为 ease 的任何元素，然后单击单词 ease 旁边的方形曲线图标并拖动任一圆形手柄。

【讨论】：

帮助自定义 jquery 缓动功能

】帮助自定义jquery缓动功能【英文标题】：Helpwithcustomjqueryeasingfunction【发布时间】：2011-11-0618:27:19【问题描述】：我需要一个相当非典型的jquery缓动函数。它基本上与您传统的easeInOut缓动相反，因为我希望该过程从快速的介绍... 查看详情

如何构建自定义 jQuery 缓动/弹跳动画？

】如何构建自定义jQuery缓动/弹跳动画？【英文标题】：HowToBuildCustomjQueryEasing/BounceAnimations?【发布时间】：2013-01-0522:49:32【问题描述】：我熟悉jQueryanimate功能，也经历过各种jQueryUIeasingfunctions。不幸的是，它们都不是我正在寻找... 查看详情

修复了 jQuery 缓动的加速？

】修复了jQuery缓动的加速？【英文标题】：FixedaccelerationforjQueryeasing?【发布时间】：2013-10-0604:35:56【问题描述】：我正在制作一个非常规的网站，它可以水平滚动很远的距离。我注意到jQuery的缓动函数在滚动距离的长度范围内被... 查看详情

用缓动函数模拟物理动画

用缓动函数模拟物理动画 1、缓动函数简介   <1>缓动函数的动画效果是建立在CALayer层级的关键帧动画基础之上     也就是说用普通的UIView的Animation是无法直接实现缓动函数   <2&g... 查看详情

jquery ui拖动缓动/惯性

】jqueryui拖动缓动/惯性【英文标题】：jqueryuidrageasing/inertia【发布时间】：2011-05-2512:26:30【问题描述】：如何在使用jqueryuidraggable(http://jqueryui.com/demos/draggable/)拖动元素时启用缓动或惯性？我想重新创建类似于maps.google.com的缓动，... 查看详情

qt炫酷动画6.qeasingcurve缓动曲线类(代码片段)

QEasingCurve描述缓动曲线描述了一个函数，该函数控制0和1之间的插值速度应该如何。缓动曲线允许从一个值到另一个值的过渡看起来比简单的恒定速度所允许的更自然。QEasingCurve类通常与QVariantAnimation和QPropertyAnimation类一起使用... 查看详情

qt炫酷动画6.qeasingcurve缓动曲线类(代码片段)

QEasingCurve描述缓动曲线描述了一个函数，该函数控制0和1之间的插值速度应该如何。缓动曲线允许从一个值到另一个值的过渡看起来比简单的恒定速度所允许的更自然。QEasingCurve类通常与QVariantAnimation和QPropertyAnimation类一起使用... 查看详情

easing缓动函数收集(代码片段)

Easing缓动函数收集缓动函数ECharts图表jqueryeasing插件Java参考资料之前收集了不少链接，结果久了都404了。还是得复制一份代码过来才放心。缓动函数ECharts图表来自​EChartsDemoEasing​consteasingFuncs=linear:function(k)returnk;,quadraticIn... 查看详情

带有通用缓动的 jQuery 动画队列

】带有通用缓动的jQuery动画队列【英文标题】：jQueryanimationqueuewithcommoneasing【发布时间】：2013-08-0821:28:32【问题描述】：我有排队等待单个元素的jQuery动画：varel=$(\'.elem\');el.animate(width:120,600,\'easeInOutQuint\').animate(width:90,300,\'easeIn... 查看详情

Jquery 缓动动画在 iPad 上滞后

】Jquery缓动动画在iPad上滞后【英文标题】：JqueryeasinganimationslagoniPad【发布时间】：2015-01-2115:33:53【问题描述】：我一直在为iOS开发一款网络应用游戏，我注意到iPhone与iPad的性能存在显着差异。当玩家开始关卡时，使用带有jQ​... 查看详情

jquery特效

基础特效方法描述hide()立即隐藏jQuery对象内的所有元素hide(time)、hide(time,easing)在指定的时间内以动画方式隐藏jQuery对象内的所有元素，并可选一种缓动风格hide(time,function)、hide(time,easing,function)在指定的时间内以动画方式隐藏jQuery... 查看详情

wpf中的动画——缓动函数

原文:WPF中的动画——（四）缓动函数缓动函数可以通过一系列公式模拟一些物理效果，如实地弹跳或其行为如同在弹簧上一样。它们一般应用在From/To/By动画上，可以使得其动画更加平滑。    varwidthAnimation=newDoubleA... 查看详情

jquery特效

基础特效方法描述hide()立即隐藏jQuery对象内的所有元素hide(time)、hide(time,easing)在指定的时间内以动画方式隐藏jQuery对象内的所有元素，并可选一种缓动风格hide(time,function)、hide(time,easing,function)在指定的时间内以动画方式隐藏jQuery... 查看详情

qt炫酷动画6.qeasingcurve缓动曲线类(代码片段)

QEasingCurve描述缓动曲线描述了一个函数，该函数控制0和1之间的插值速度应该如何。缓动曲线允许从一个值到另一个值的过渡看起来比简单的恒定速度所允许的更自然。QEasingCurve类通常与QVariantAnimation和QPropertyAnimation类一起使用... 查看详情

第59天：缓动动画封装函数

一、三个取整函数 这三个函数都是 数学函数   Math   Math.ceil()   向上取整     天花板    比如说 console.log(Math.ceil(1.01))&n 查看详情

js---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数(代码片段)

封装缓动（变速）动画函数---增加任意多个属性&增加回调函数 回掉函数fn，在所有元素到达目的位置后，判断是否传入一个函数，有就调用if(fn)fn();这样一次点击，产生多个动画<!DOCTYPEhtml><htmllang="en"><head><... 查看详情

js缓动动画原理

计算公式：(目标距离-已走距离)/10//给动画函数增加一个回调函数functionantimer(obj,distance,callback)//避免多个元素拥有定时器时引起歧义节省内存空间vartimer改成obj的一个属性//在每次执行定时器函数的时，清除上一个定时器c... 查看详情

js-特效～05.缓动框架兼容封装／回掉函数／兼容透明度／层级旋转轮播图正则表达式验证表单注册账号

缓动函数中opcity 写百分值的值JS一般不用小数运算，会照成精度丢失元素的默*认透明度是层级一次性赋值，不缓动利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装／回掉函数／兼容透明度／层级functionanima... 查看详情