jquery - 使用变换比例、jQuery 和 CSS3 淡入淡出

Question

我正在尝试创建一个盒子淡入的效果，并随着它淡入而“增长”一点。

盒子以 display:none 和 transform: scale(0.8,0.8) 开始，所以它比原来的小 0.2。

随着它逐渐消失，我希望它也能按比例放大为 scale(1,1)

我在 5000 延迟后使用 jQuery 处理淡入，然后我使用 jQuery 将新样式附加到框。

我有 transition: transform 1s; 来处理从 0.8 到 1 的平滑过渡，但它似乎不起作用.

$( document ).ready(function() {
    console.log( "ready!" );
    $(".modal-newsletter-wrap").delay(5000).fadeIn( "slow", function() {
  });
    $(".modal-newsletter").delay(6000).css( "transform", "scale(1,1)" );
});

这是CSS

.modal-newsletter{transition: transform 1s;transform:scale(0.8,0.8);position:fixed;}

包含的 JSFiddle 显示它淡入(等待几秒钟)但它以完整的 1 大小而不是 0.8 淡入。

https://jsfiddle.net/bpbd1mjp/1/

Answer 1

jQuery 不是必需的，使用简单的 CSS3 动画代替:http://codepen.io/anon/pen/xbMWXL

@-webkit-keyframes overlay {
   0% { -webkit-transform: scale(.8); opacity: 0; }
   100%   { -webkit-transform: scale(1.1); opacity: 1; z-index: 1  }
}
@-moz-keyframes overlay {
   0% { -moz-transform: scale(.8); opacity: 0; }
   100%   { -moz-transform: scale(1.1); opacity: 1; z-index: 1   }
}
@keyframes overlay {
   0% { transform: scale(.8); opacity: 0; }
   100%   { transform: scale(1.1); opacity: 1;  z-index: 1   }
}

.modal-newsletter-wrap {
  width: 100px;
  height: 100px;
  background: #ccc;

  /* start with a negative z-index so the user may interact with the page 
     the actual z-index is set on the last animation keyframe */

  position: fixed;
  z-index: -1;

  opacity: 0;

  -webkit-transform: scale(.8);
  -webkit-animation: overlay 1s linear 5s 1 forwards;

  -moz-transform: scale(.8);
  -moz-animation: overlay 1s linear 5s 1 forwards;

  transform: scale(.8);
  animation: overlay 1s linear 5s 1 forwards;
}

效果在 5 秒延迟后开始，效果持续时间设置为 1 秒。当它消失时，元素缩放到 1.1。动画保留最后一帧(animation-fill-mode 属性设置为 forwards)