Определение анимации React CSSTransitionGroup с помощью миксина Stylus

Я новичок в стилусе и пытаюсь разобраться во всех нюансах.

Для справки, в React есть компонент, помогающий с анимацией CSS https://facebook.github.io/react/docs/animation.html

Я хочу иметь возможность определять анимацию с помощью миксина. Например, если у меня есть анимация «кнопка входа», я хочу иметь возможность указать, что анимация должна быть анимацией затухания, выполнив что-то вроде этого:

animate.fade('login-button')

Итак, я написал функцию/примесь, но она не работает. Когда я запускаю его через стилус, я получаю сообщение об ошибке:

❯❯❯ 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"

reactjs css stylus
person Chet    schedule 22.07.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Имя миксина не может содержать точку. Вместо этого вы можете написать это с помощью -:

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')
person Panya    schedule 22.07.2015