小编Rey*_*yno的帖子

我正在尝试在Emotion中创建可重用的动画，但遇到了一些问题。我已经定义了一个fadeUp效果很好的动画。

export const animatedFadeUp = css`
  opacity: 1;
  transform: translateY(0);
`;

export const fadeUp = css`
  opacity: 0;
  transform: translateY(var(--spacing-medium));
  transition: opacity 0.5s ease-in-out,
    transform 0.5s ease-in-out;

  html.no-js & {
    ${animatedFadeUp}
  }
`;

但是，当我尝试将fadeUp动画应用到已经定义了过渡的元素时，它会被否决。例如下面的按钮。该transition遗嘱将被 否决button。

const Button = styled.button`
  ${fadeUp}
  background: orange;
  transition: background-color 0.5s ease-in-out;

  &:hover,
  &:focus {
    background: gold;
  }
`;

有没有一种解决方案可以仅组合单个属性？就像是：

const Button = styled.button`
  ${fadeUp}
  background: orange;
  transition: ${fadeUp.transition},
    background-color 0.5s ease-in-out;

  &:hover,
  &:focus {
    background: …

我正在使用粘性标题，position:fixed一旦向上滚动，该标题就会更改为 。为了检测向上滚动，我将当前的滚动顶部与旧的滚动顶部 \xe2\x80\x93 进行比较，这工作得很好！

现在我正在为页脚实现内容可见性，以节省页面加载的一些渲染时间。

$(document).ready(function(){\n  var lastScrollTop = window.pageOffsetY || 0;\n  var isFixed = false;\n  $(window).on(\'scroll\', _.throttle(function(){\n      var scrollTop = $(window).scrollTop();\n      if(scrollTop > 200 && scrollTop < lastScrollTop && !isFixed){\n        console.log(\'stick header\');\n        $(\'.header\').addClass(\'header-fixed\');\n        isFixed = true;\n      } else if((scrollTop > lastScrollTop && isFixed) ||\xc2\xa0scrollTop == 0){\n        console.log(\'unstick header\');\n        $(\'.header\').removeClass(\'header-fixed\');\n        isFixed = false;\n      }\n    lastScrollTop = scrollTop;\n  }, 500));\n});

.content {\n  height: 200vh;\n  background-color: grey;\n}\n\n.content-visibility {\n  content-visibility: auto;\n}\n\n.content-inner {\n  height: 100px;\n  background-color: green;\n}\n\nimg.content-inner …