当前位置：文江博客话题详情

模仿 reeder 风格的屏幕截图弹出缓动

发布于 2024-11-15 10:45:19 字数 188 浏览 4 评论 0原文

芦苇灯箱弹出窗口最后有一个缓动。

我正在寻找一种模仿这种宽松的方法。我该怎么做？

请提供 jQuery/css 解决方案。

http://reederapp.com/mac/screens

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

背叛残局 2024-11-22 10:45:19

效果甜美！

这些似乎是通过 JS 触发的 CSS 转换。叠加层首先立即缩放至 50% 的大小，然后动画化至 105%，最后又动画化回 100%，两者均采用ease-out 的缓动设置。

这会导致所谓的“80/20 效果”：通过最初跳过动画的前 80%（或在本例中为 50%），动画看起来更加敏捷且响应更快。

以下是有问题的代码位：（从 reederapp.com 的来源复制 - 我没有写这些！ )

CSS (http://reederapp.com/mac/css/main.css)

#screen-overlay.animate {
    -webkit-transition: all 0.2s ease-out;  
}

JS (http://reederapp.com/mac/js /mac.js)

$overlay()
  .removeClass('animate')
  .css({opacity:0,'-webkit-transform':'scale(0.5)','background-color':'rgba(0,0,0,0)'})
  .show();

setTimeout(function() {
  $overlay().addClass('animate').css({'-webkit-transform':'scale(1.05)',opacity:1});
  setTimeout(function() {
    $overlay().css({'-webkit-transform':'scale(1)'});
    setTimeout(function() {
      $overlay().css({'background-color':'rgba(0,0,0,0.5)'})
    });
  },200);
},10);

Sweet–looking effect!

It seems these are CSS transitions triggered via JS. The overlay is first instantly scaled to a size of 50%, then animated to 105% and afterwards animated back to 100%, both with an easing setting of ease-out.

This causes what's known as the "80/20 effect": By skipping the first 80% (or in this case 50%) of an animation initially, the animation appears to be more snappy and responsive.

Here are the code bits in question: (Copied from reederapp.com's source — I haven not written these!)

CSS (http://reederapp.com/mac/css/main.css)

#screen-overlay.animate {
    -webkit-transition: all 0.2s ease-out;  
}

JS (http://reederapp.com/mac/js/mac.js)

$overlay()
  .removeClass('animate')
  .css({opacity:0,'-webkit-transform':'scale(0.5)','background-color':'rgba(0,0,0,0)'})
  .show();

setTimeout(function() {
  $overlay().addClass('animate').css({'-webkit-transform':'scale(1.05)',opacity:1});
  setTimeout(function() {
    $overlay().css({'-webkit-transform':'scale(1)'});
    setTimeout(function() {
      $overlay().css({'background-color':'rgba(0,0,0,0.5)'})
    });
  },200);
},10);

回复收藏 0 原文

~没有更多了~