CSS展开框动画

Question

我有一些盒子（想想椭圆形的巧克力盒子），我想展开并展示其中的内容。内容将是另一个带文本，视频等的div，但我目前关注展开的动画本身。

我有点工作，但前两个div在动画时留下了间隙。有什么方法可以将它们连接在一起，同时展开＆＃39;它们？

演示：JSFiddle

HTML：

           <section>
              <div class="block3d">
                 <div class="front">
                    <h4>CHOCOLATE</h4>
                 </div>
                 <div class="top"><h4></h4></div>
                 <div class="back">
                    <ul>
                       <li>Chocolate</li>
                       <li>Milk</li>
                       <li>Nuts</li>
                       <li>Oranges</li>
                    </ul>
                    <a class="infolink" href="#">Open me</a>
                 </div>
                 <div class="bottom"><h4></h4></div>
              </div>
           </section>

使用Javascript：

$(document).ready(function(){
    $(".block3d .infolink").click(function(e){
      openBlock(this, e);
    });
});

function openBlock(element, event)
{
    event.preventDefault();

    $(element).closest('section').addClass('open');
    $.scrollTo($(element).closest('section'), {duration: 1000});
}

CSS：

  section
  {
     -webkit-perspective: 800px;
     -webkit-perspective-origin: 50% 100px;

     -moz-perspective: 800px;
     -moz-perspective-origin: 50% 100px;

     -ms-perspective: 800px;
     -ms-perspective-origin: 50% 100px;

     perspective: 800px;
     perspective-origin: 50% 100px;

     width: 960px;
     height: 240px;
     margin: 10px auto;

     transition-property: height;
     transition-timing-function: linear;
     transition-duration: 0.5s;
     transition-delay: 100ms;
  }

  section.open
  {
     height: 960px;
  }

  .block3d
  {
     position: relative;
     width: 960px;
     height: 200px;

     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -ms-transform-style: preserve-3d;
     transform-style: preserve-3d;

     margin: 0 auto;

     -webkit-transform-origin: 0 100px;
     -moz-transform-origin: 0 100px;
     -ms-transform-origin: 0 100px;
     transform-origin: 0 100px;


     transition-property: transform, display;
     transition-timing-function: linear;
     transition-duration: 0.5s;
     transition-delay: 100ms;
  }

  .block3d:hover, .open .block3d
  {
     -webkit-transform: rotateX(-180deg);
     -ms-transform: rotateX(-180deg);
     transform: rotateX(-180deg);
  }


  /* Positioning of the different faces of the block */
  .block3d div
  {
     position: absolute;
     width: 960px;
     height: 200px;

     background-color: rgba(0,0,0,0.4);
     color: #FFFFFF;
  }

  .block3d .back
  {
     -webkit-transform: translateZ(-100px) rotateX(180deg);
     -moz-transform: translateZ(-100px) rotateX(180deg);
     -ms-transform: translateZ(-100px) rotateX(180deg);
     transform: translateZ(-100px) rotateX(180deg);

     background-color: #323232;
  }

  .block3d .top
  {
     -webkit-transform: rotateX(-270deg) translateY(-100px);
     -webkit-transform-origin: top center;

     -moz-transform: rotateX(-270deg) translateY(-100px);
     -moz-transform-origin: top center;

     -ms-transform: rotateX(-270deg) translateY(-100px);
     -ms-transform-origin: top center;

     transform: rotateX(-270deg) translateY(-100px);
     transform-origin: top center;
  }

  .block3d .bottom
  {
     -webkit-transform: rotateX(-90deg) translateZ(100px);
     -moz-transform: rotateX(-90deg) translateZ(100px);
     -ms-transform: rotateX(-90deg) translateZ(100px);
     transform: rotateX(-90deg) translateZ(100px);
  }

  .block3d .front 
  {
     -webkit-transform: translateZ(100px);
     -moz-transform: translateZ(100px);
     -ms-transform: translateZ(100px);
     transform: translateZ(100px);

  }



  /* Div content styling */
  .block3d h4, .block3d ul
  {
     margin-left: 480px;
     background-color: #323232;
     margin-top: 0;
  }

  .block3d h4
  {
     font-size: 20px;
     text-align: center;
     padding-top: 90px;
     height: 110px;
     width: 300px;
  }

  .block3d ul
  {
     padding: 40px;
     height: auto;
     width: 220px;
  }

  .block3d .infolink
  {
     display: block;
     margin-left: 455px;
     height: 30px;
     width: 100px;
     color: #ffffff;
     text-align: center;
     padding: 2px;
     border: 1px dashed #FFFFFF;
     border-top-right-radius: 30px;
     border-top-left-radius: 30px;
     border-bottom: 0;
  }


  /* Open animations for the different parts */
  .open .block3d .top
  {
     -webkit-transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
     -moz-transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
     transform: rotateX(-360deg) translateY(-200px) translateZ(100px);


     transition-property: transform;
     transition-timing-function: linear;
     transition-duration: 0.5s;
     transition-delay: 0s;
  }

  @-webkit-keyframes openback
  {
     0% {-webkit-transform: translateZ(-100px) rotateX(180deg) translateY(0)}
     50% {-webkit-transform: rotateX(270deg) translateZ(300px)}
     100% {-webkit-transform: rotateX(360deg) translateY(400px) translateZ(100px)}
  }

  @-moz-keyframes openback
  {
     0% {-moz-transform: translateZ(-100px) rotateX(180deg) translateY(0)}
     50% {-moz-transform: rotateX(270deg) translateZ(300px)}
     100% {-moz-transform: rotateX(360deg) translateY(400px) translateZ(100px)}
  }

  @keyframes openback
  {
     0% {transform: translateZ(-100px) rotateX(180deg) translateY(0)}
     50% {transform: rotateX(270deg) translateZ(300px)}
     100% {transform: rotateX(360deg) translateY(400px) translateZ(100px)}
  }

  .open .block3d .back
  {
     -webkit-animation: openback 1s 1 linear forwards;
     -moz-animation: openback 1s 1 linear forwards;
     animation: openback 1s 1 linear forwards;

  }

  .open .block3d .bottom
  {
     -webkit-transform: rotateX(-360deg) translateZ(100px) translateY(200px);
     -moz-transform: rotateX(-360deg) translateZ(100px) translateY(200px);
     transform: rotateX(-360deg) translateZ(100px) translateY(200px);

     transition-property: transform;
     transition-timing-function: linear;
     transition-duration: 0.5s;
     transition-delay: 0.0s;

  }

  /* Move the block into place */
  .open .block3d
  {
     -webkit-transform: translateZ(100px) rotateX(180deg) translateY(-440px);
     -moz-transform: translateZ(100px) rotateX(180deg) translateY(-440px);
     transform: translateZ(100px) rotateX(180deg) translateY(-440px);

     transition-property: transform;
     transition-timing-function: linear;
     transition-duration: 1s;
     transition-delay: 0s;

  }

Answer 1

如果您正在寻找酷纸折叠/展开动画，请查看this tutorial，这是git上的代码。我特意查看了pfold.jquery.js文件以实现这种动画。

虽然可能需要稍微调整一下js / css来让它看起来你想要的，因为这是展开纸而不是打开一个盒子，但基本动画就在那里。

Answer 2

您可以在交叉元素的顶部和底部添加1px伪元素。您可能希望在动画期间添加它，然后在它停止后看不到额外的空间后将其删除。

Here is a JSFiddle

相关CSS

.back {
    position: absolute;
    top: -1px;
    margin-top: 1px;
    margin-bottom: 1px;
}
.block3d h4
{
    display: block;
    position: absolute;
    top: -1px;
    font-size: 20px;
    text-align: center;
    padding-top: 90px;
    height: 110px;
    width: 300px;
    margin-top: 1px;
    margin-bottom: 1px;
}
.block3d h4:before,
.block3d h4:after,
.back:before,
.back:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background: #323232;    
}
.block3d h4:before,
.back:before {
    top: -1px;
}
.block3d h4:after,
.back:after {
    bottom: -1px;
}