使用手寫筆定義React CSSTransitionGroup動畫mixin

Question

我是新手寫筆，試圖找出所有的細微差別。

僅供參考，陣營有分量，以協助CSS動畫 https://facebook.github.io/react/docs/animation.html

我希望能夠定義使用一個mixin動畫。舉例來說，如果我有一個「登錄按鈕」的動畫，我希望能夠指定通過做這樣的事情動畫應該是動畫漸變：

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" 

Answer 1

混合名稱不能包含點。你可以用-來代替它：

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')