Question

我试图创建一个盒子淡入的效果，并且＆＃34;增长＆＃34;它消失了一点点。

该框以display:none和transform: scale(0.8,0.8)开头，因此它比原始版本小0.2。

随着它消失，我希望它也可以扩展为scale(1,1)

我在使用jQuery延迟5000之后处理淡入淡出，然后我使用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）

Answer 2

我不知道我是否做对了，但你可以这样试试 js：

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

});

并改变这个css：

.modal-newsletter{
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    -webkit-transform: scale(0.8,0.8);
    -moz-transform: scale(0.8,0.8);
    transform: scale(0.8,0.8);
    background-repeat:repeat-x;
    background-image:url(http://localhost/Eat-Sleep-Knit/wp-content/themes/KnittersParadise/img/stripe.png);
    position:fixed;
}

这是链接

https://jsfiddle.net/bpbd1mjp/4/

使用变换比例，jQuery和CSS3淡入

2 个答案: