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

我是新手寫筆，試圖找出所有的細微差別。使用手寫筆定義React CSSTransitionGroup動畫mixin

僅供參考，陣營有分量，以協助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"

來源

2015-07-22 Chet

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

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

來源

2015-07-22 12:17:32 Panya

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

回答

相關問題