表单/表格

价格表和结账表单切换动画特效

创客主机


这是一款非常实用的jQuery和CSS3价格表和结账表单切换动画特效。该特效先向用户展示各种价格表,当用户选择了一个价格表之后,价格表会变形为结账表单,效果非常的炫酷。

HTML结构

该特效的HTML结构分为2个部分:ul.cd-pricing是商品的价格表,div.cd-form是结账表单模态窗口。

  1. <ul class="cd-pricing">
  2.   <li>
  3.     <header class="cd-pricing-header">
  4.       <h2>Basic</h2>
  5.       <div class="cd-price">
  6.         <span>$9.99</span>
  7.         <span>month</span>
  8.       </div>
  9.     </header> <!-- .cd-pricing-header -->
  10.     <div class="cd-pricing-features">
  11.       <ul>
  12.         <li class="available"><em>Feature 1</em></li>
  13.         <li><em>Feature 2</em></li>
  14.         <li><em>Feature 3</em></li>
  15.         <li><em>Feature 4</em></li>
  16.       </ul>
  17.     </div> <!-- .cd-pricing-features -->
  18.     <footer class="cd-pricing-footer">
  19.       <a href="#0">Select</a>
  20.     </footer> <!-- .cd-pricing-footer -->
  21.   </li>
  22.   ...
  23. </ul> <!-- .cd-pricing -->
  24. <div class="cd-form">
  25.   <div class="cd-plan-info">
  26.     <!-- content will be loaded using jQuery - according to the selected plan -->
  27.   </div>
  28.   <div class="cd-more-info">
  29.     <h3>Need help?</h4>
  30.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  31.   </div>
  32.   <form action="">
  33.     <fieldset>
  34.       <legend>Account Info</legend>
  35.       <div class="half-width">
  36.         <label for="userName">Name</label>
  37.         <input type="text" id="userName" name="userName">
  38.       </div>
  39.       ...
  40.     </fieldset>
  41.     ...
  42.   </form>
  43.   <a href="#0" class="cd-close"></a>
  44. </div> <!-- .cd-form -->
  45. <div class="cd-overlay"></div> <!-- shadow layer -->

CSS样式

该特效的CSS样式十分简单。需要注意的是当表单可见的时候,.empty-boxclass被添加到.cd-pricing < li元素上。.empty-box还用于隐藏原来的列表项。

  1. .cd-pricing > li {
  2.   position: relative;
  3.   margin: 0 auto 2.5em;
  4.   background-color: #ffffff;
  5.   border-radius: .3em .3em .25em .25em;
  6.   box-shadow: 0 2px 8px rgba(2, 4, 5, 0.5);
  7. }
  8.  
  9. .cd-pricing > li.empty-box {
  10.   box-shadow: none;
  11. }
  12.  
  13. .cd-pricing > li.empty-box::after {
  14.   /* placeholder visible when .cd-form is open - in this case same color of the background */
  15.   content: '';
  16.   position: absolute;
  17.   top: 0;
  18.   left: 0;
  19.   width: 100%;
  20.   height: 100%;
  21.   background-color: #0f222b;
  22. }

div.cd-form设置为固定定位,开始时不设置它的尺寸大小。当用户点击了选择按钮,表单变为可见状态,这时它的尺寸和价格表尺寸相同,然后再使它慢慢放大,制作变形动画效果。

  1. .cd-form {
  2.   position: fixed;
  3.   z-index: 2;
  4.   background-color: #ffffff;
  5.   border-radius: .25em;
  6.   visibility: hidden;
  7.   transition: visibility 0s 0.8s;
  8.  
  9.   /* Force Hardware Acceleration in WebKit */
  10.   transform: translateZ(0);
  11.   backface-visibility: hidden;
  12. }
  13.  
  14. .cd-form.is-visible {
  15.   /* form is visible */
  16.   visibility: visible;
  17.   transition: visibility 0s 0s;
  18. }

另外,在桌面设备中,当表单变为可见状态的时候,价格表的绿色背景会变为结账表单选项列表的背景。这个动画效果是由.cd-form .cd-pricing-features::before元素使用scale来制作的。

  1. .cd-form .cd-pricing-features::before {
  2.   /* this is the layer which covers the .cd-pricing-features when the form is open - visible only on desktop */
  3.   content: '';
  4.   position: absolute;
  5.   /* fix a bug while animating - 1px white space visible */
  6.   top: -5px;
  7.   left: 0;
  8.  
  9.   height: calc(100% + 5px);
  10.   width: 100%;
  11.   background-color: #95ac5f;
  12.  
  13.   will-change: transform;
  14.   transform: scaleY(0);
  15.   transform-origin: center top;
  16.   transition: transform 0.6s 0.2s;
  17. }

JAVASCRIPT

该特效中使用了Velocity.js来制作动画效果。animateForm()函数用于结账表单模态窗口的动画:当用户选择了一个价格表,该函数会评估被选择的价格表的大小和位置,并在.cd-form元素中使用这些参数来完成价格表到结账表单的变形动画。然后就开始了变形动画,.cd-form的宽度和高度从初始值过渡到最终值,并使它在屏幕上居中显示。

  1. //form is the .cd-form element
  2. form.velocity(
  3. {
  4.   'width': tableWidth+'px', //pricing table item width
  5.   'height': tableHeight+'px', //pricing table item height
  6.   'top': formTopValue, //final top value of the form 
  7.   'left': formLeftValue, //final top value of the form 
  8.   'translateX': formTranslateX+'px', //difference between formLeftValue and pricing table item left value
  9.   'translateY': formTranslateY+'px', //difference between formTopValue and pricing table item top value
  10.   'opacity': 1,
  11. }, 0, function(){
  12.   //table is the pricing table item
  13.   table.addClass('empty-box');
  14.  
  15.   form.velocity(
  16.   {
  17.     'width': formFinalWidth+'px', //form final width
  18.     'height': formFinalHeight+'px', //form final height
  19.     'translateX': 0,
  20.     'translateY': 0,
  21.   }, 
  22.   //animation duration
  23.   animationDuration, 
  24.   //spring easing
  25.   [ 220, 20 ]).addClass('is-visible');
  26. });

当用户关闭模态窗口的时候,表单被隐藏,反向动画开始执行。

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!