react-spring single-component mount/unmount reveals

up vote
0
down vote

favorite

i'm trying to create animation when component mount/unmount with React-spring:

    import { Transition, animated } from 'react-spring'

    ...



    export class CompName extends PureComponent<CompNamePropsType> {

      static defaultProps = {

        isExpanded: false,

      }



      render() {

        const {

          isExpanded,

          ...props

        } = this.props



    return (

      <section className={styles.block} {...props}>

        <Transition

          from={{ opacity: 0 }}

          enter={{ opacity: 1 }}

          leave={{ opacity: 0 }}>

        {isExpanded && (style => (

           <animated.div style={{ ...style, background: "orange" }}>

             <AnotherComp />

           </animated.div>

        ))}

       </Transition>

      </section>

    )

  }

}

But this is just does not work and i got an error children is not a function. What i did wrong, and how can i create animation on component mount/unmount with react-spring wrapper?

asked Nov 9 at 15:30

Vladimir Humeniuk

315112

If isExpanded is falsy it is returned as the children props to the Transition component which seems to expect a render prop, which you correctly return in t he case isExpanded is truthy. You can refactor this using a ternary operator and returning some kind of noop function when isExpanded is falsy.
– adz5A
Nov 9 at 15:35

@adz5A when isExpanded is 'true' error is ' TypeError: child is not a function', and if its 'false' - ' TypeError: _children is not a function'
– Vladimir Humeniuk
Nov 9 at 15:40

This is because the signature for the children in your snippet is not correct. It is a function which returns a function: item => props => reactElement. See react-spring.surge.sh/transition . Your example lacks the items props and a correct signature for the children props.
– adz5A
Nov 9 at 15:53

add a comment |

up vote
0
down vote

favorite

i'm trying to create animation when component mount/unmount with React-spring:

    import { Transition, animated } from 'react-spring'

    ...



    export class CompName extends PureComponent<CompNamePropsType> {

      static defaultProps = {

        isExpanded: false,

      }



      render() {

        const {

          isExpanded,

          ...props

        } = this.props



    return (

      <section className={styles.block} {...props}>

        <Transition

          from={{ opacity: 0 }}

          enter={{ opacity: 1 }}

          leave={{ opacity: 0 }}>

        {isExpanded && (style => (

           <animated.div style={{ ...style, background: "orange" }}>

             <AnotherComp />

           </animated.div>

        ))}

       </Transition>

      </section>

    )

  }

}

But this is just does not work and i got an error children is not a function. What i did wrong, and how can i create animation on component mount/unmount with react-spring wrapper?

asked Nov 9 at 15:30

Vladimir Humeniuk

315112

If isExpanded is falsy it is returned as the children props to the Transition component which seems to expect a render prop, which you correctly return in t he case isExpanded is truthy. You can refactor this using a ternary operator and returning some kind of noop function when isExpanded is falsy.
– adz5A
Nov 9 at 15:35

@adz5A when isExpanded is 'true' error is ' TypeError: child is not a function', and if its 'false' - ' TypeError: _children is not a function'
– Vladimir Humeniuk
Nov 9 at 15:40

This is because the signature for the children in your snippet is not correct. It is a function which returns a function: item => props => reactElement. See react-spring.surge.sh/transition . Your example lacks the items props and a correct signature for the children props.
– adz5A
Nov 9 at 15:53

add a comment |

up vote
0
down vote

favorite

i'm trying to create animation when component mount/unmount with React-spring:

    import { Transition, animated } from 'react-spring'

    ...



    export class CompName extends PureComponent<CompNamePropsType> {

      static defaultProps = {

        isExpanded: false,

      }



      render() {

        const {

          isExpanded,

          ...props

        } = this.props



    return (

      <section className={styles.block} {...props}>

        <Transition

          from={{ opacity: 0 }}

          enter={{ opacity: 1 }}

          leave={{ opacity: 0 }}>

        {isExpanded && (style => (

           <animated.div style={{ ...style, background: "orange" }}>

             <AnotherComp />

           </animated.div>

        ))}

       </Transition>

      </section>

    )

  }

}

But this is just does not work and i got an error children is not a function. What i did wrong, and how can i create animation on component mount/unmount with react-spring wrapper?

asked Nov 9 at 15:30

Vladimir Humeniuk

315112

i'm trying to create animation when component mount/unmount with React-spring:

    import { Transition, animated } from 'react-spring'

    ...



    export class CompName extends PureComponent<CompNamePropsType> {

      static defaultProps = {

        isExpanded: false,

      }



      render() {

        const {

          isExpanded,

          ...props

        } = this.props



    return (

      <section className={styles.block} {...props}>

        <Transition

          from={{ opacity: 0 }}

          enter={{ opacity: 1 }}

          leave={{ opacity: 0 }}>

        {isExpanded && (style => (

           <animated.div style={{ ...style, background: "orange" }}>

             <AnotherComp />

           </animated.div>

        ))}

       </Transition>

      </section>

    )

  }

}

But this is just does not work and i got an error children is not a function. What i did wrong, and how can i create animation on component mount/unmount with react-spring wrapper?

reactjs jsx react-spring

asked Nov 9 at 15:30

Vladimir Humeniuk

315112

asked Nov 9 at 15:30

Vladimir Humeniuk

315112

asked Nov 9 at 15:30

Vladimir Humeniuk

315112

asked Nov 9 at 15:30

Vladimir Humeniuk

315112

asked Nov 9 at 15:30

Vladimir Humeniuk

315112

If isExpanded is falsy it is returned as the children props to the Transition component which seems to expect a render prop, which you correctly return in t he case isExpanded is truthy. You can refactor this using a ternary operator and returning some kind of noop function when isExpanded is falsy.
– adz5A
Nov 9 at 15:35

@adz5A when isExpanded is 'true' error is ' TypeError: child is not a function', and if its 'false' - ' TypeError: _children is not a function'
– Vladimir Humeniuk
Nov 9 at 15:40

This is because the signature for the children in your snippet is not correct. It is a function which returns a function: item => props => reactElement. See react-spring.surge.sh/transition . Your example lacks the items props and a correct signature for the children props.
– adz5A
Nov 9 at 15:53

add a comment |

If isExpanded is falsy it is returned as the children props to the Transition component which seems to expect a render prop, which you correctly return in t he case isExpanded is truthy. You can refactor this using a ternary operator and returning some kind of noop function when isExpanded is falsy.
– adz5A
Nov 9 at 15:35

@adz5A when isExpanded is 'true' error is ' TypeError: child is not a function', and if its 'false' - ' TypeError: _children is not a function'
– Vladimir Humeniuk
Nov 9 at 15:40

This is because the signature for the children in your snippet is not correct. It is a function which returns a function: item => props => reactElement. See react-spring.surge.sh/transition . Your example lacks the items props and a correct signature for the children props.
– adz5A
Nov 9 at 15:53

If isExpanded is falsy it is returned as the children props to the Transition component which seems to expect a render prop, which you correctly return in t he case isExpanded is truthy. You can refactor this using a ternary operator and returning some kind of noop function when isExpanded is falsy.
– adz5A
Nov 9 at 15:35

@adz5A when isExpanded is 'true' error is ' TypeError: child is not a function', and if its 'false' - ' TypeError: _children is not a function'
– Vladimir Humeniuk
Nov 9 at 15:40

This is because the signature for the children in your snippet is not correct. It is a function which returns a function: item => props => reactElement. See react-spring.surge.sh/transition . Your example lacks the items props and a correct signature for the children props.
– adz5A
Nov 9 at 15:53

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

The correct way is:

<Transition items={isExpanded} native from enter leave>

  {isExpanded => isExpanded && (props => <animated.div style={props} />)

</Transition>

Items in, can be a single item like in your case, then work against the item that comes out. Reason for that is that transition will retain it, even when the actual state changes, it can still safely transition an element out on the "old" state.

The api is explained here: react-spring.surge.sh/transition

answered Nov 9 at 18:53

hpalu

1779

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53228681%2freact-spring-single-component-mount-unmount-reveals%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

The correct way is:

<Transition items={isExpanded} native from enter leave>

  {isExpanded => isExpanded && (props => <animated.div style={props} />)

</Transition>

The api is explained here: react-spring.surge.sh/transition

answered Nov 9 at 18:53

hpalu

1779

add a comment |

up vote
1
down vote

accepted

The correct way is:

<Transition items={isExpanded} native from enter leave>

  {isExpanded => isExpanded && (props => <animated.div style={props} />)

</Transition>

The api is explained here: react-spring.surge.sh/transition

answered Nov 9 at 18:53

hpalu

1779

add a comment |

up vote
1
down vote

accepted

The correct way is:

<Transition items={isExpanded} native from enter leave>

  {isExpanded => isExpanded && (props => <animated.div style={props} />)

</Transition>

The api is explained here: react-spring.surge.sh/transition

answered Nov 9 at 18:53

hpalu

1779

The correct way is:

<Transition items={isExpanded} native from enter leave>

  {isExpanded => isExpanded && (props => <animated.div style={props} />)

</Transition>

The api is explained here: react-spring.surge.sh/transition

answered Nov 9 at 18:53

hpalu

1779

answered Nov 9 at 18:53

hpalu

1779

answered Nov 9 at 18:53

hpalu

1779

answered Nov 9 at 18:53

hpalu

1779

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl