css - 使用 Stylus mixin 定义 React CSSTransitionGroup 动画

Question

我是手写笔的新手，正在尝试找出所有细微差别。

作为引用，React 有一个组件来辅助 CSS 动画 https://facebook.github.io/react/docs/animation.html

我希望能够使用 mixin 定义动画。例如，如果我有一个“登录按钮”动画，我希望能够通过执行以下操作来指定该动画应该是淡入淡出动画:

animate.fade('login-button')

所以我写了一个类似的函数/mixin，但它不起作用。当我通过手写笔运行它时，出现错误:

❯❯❯ stylus 
animate = {}

animate.fade(name)
  .{name}-appear
    opacity: 0

  .{name}-appear.{name}-appear-active
    transition: opacity .5s ease
    opacity: 1

  .{name}-enter
    opacity: 0

  .{name}-enter.{name}-enter-active
    transition: opacity .5s ease
    opacity: 1

  .{name}-leave
    opacity: 1

  .{name}-leave.fade-leave-active
    transition: opacity .5s ease
    opacity: 0

animate.fade('login-button')

^D
/usr/local/lib/node_modules/stylus/bin/stylus:593
      if (err) throw err;
                     ^
ParseError: stdin:26:1
   22|     transition: opacity .5s ease
   23|     opacity: 0
   24| 
   25| animate.fade('login-button')
   26| 
-------^

expected "indent", got "eos"

Answer 1

Mixin 名称不能包含点。你可以用 - 代替:

animate-fade(name)
  .{name}-appear
    opacity: 0

  .{name}-appear.{name}-appear-active
    transition: opacity .5s ease
    opacity: 1

  .{name}-enter
    opacity: 0

  .{name}-enter.{name}-enter-active
    transition: opacity .5s ease
    opacity: 1

  .{name}-leave
    opacity: 1

  .{name}-leave.fade-leave-active
    transition: opacity .5s ease
    opacity: 0

animate-fade('login-button')