使用 Stylus mixin 定义 React CSSTransitionGroup 动画

Question

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

作为参考，React 有一个组件可以协助 CSS 动画 https://facebook.github.io/react/docs/animation.html

我希望能够使用 mixin 定义动画。例如，如果我有一个 "login-button" 动画，我希望能够通过执行以下操作来指定该动画应该是淡入淡出动画：

animate.fade('login-button')

所以我写了一个 function/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')

使用 Stylus mixin 定义 React CSSTransitionGroup 动画

Defining React CSSTransitionGroup animations with Stylus mixin

css

stylus

reactjs