So in the react docs for animations found here state that you need to use React.addons.CSSTransitionGroup well on the react addon docs it says that you need to use react/addons found here im not sure if meteor react includes them has anyone figured out how we can include react css transition groups?
If you try typing that in your browser console you will find that the Meteor react package does indeed include the addons.
We should mention this in the guide!
3 Likes
Interesting @sashko I guess i am experiencing a different issue than. For some reason I cannot get the following code to work
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
<template name="MainTemplate">
<div class="main-container">
{this.props.navTemplate}
<ReactCSSTransitionGroup transitionName="example">
<div class="body-container" key="1">
{this.props.bodyTemplate}
{this.props.footerTemplate}
</div>
</ReactCSSTransitionGroup>
</div>
</template>
It is wrapping my code in a span as the docs say here but for some reason it isnt adding the classes as explained in the docs here any ideas?
This is the compiled jsx code if this helps anyone
(function(){
var Template = Template || {};
Template.MainTemplate = {
_extend: {},
_instance: {},
onCreated: function (f) {
return this._onCreated = f || (this._onCreated || function () {});
},
helpers: function (o) {
return this._helpers = o || (this._helpers || {});
},
events: function (o) {
return this._events = o || (this._events || {});
},
extend: function (o) {
return _.extend(this._extend, o || {});
}
};
Template.MainTemplate._instance = { displayName: "MainTemplate",
_created: false,
mixins: [ReactMeteorData],
getInitialState: function () {
_.extend(this, _.omit(Template.MainTemplate._extend, "getInitialState"));return Template.MainTemplate._extend.getInitialState ? Template.MainTemplate._extend.getInitialState.call(this) : null;
},
getMeteorData: function () {
var self = this;
if (!self._created) {
Tracker.nonreactive(function () {
Template.MainTemplate.onCreated().call(self);
});
self._created = true;
}
var _helpers = {};
var helpers = Template.MainTemplate.helpers();
for (var key in helpers) {
_helpers[key] = helpers[key].call(self);
};
return _helpers;
},
render: function () {
return React.createElement(
"div",
{ className: "main-container" },
this.props.navTemplate,
React.createElement(
ReactCSSTransitionGroup,
{ transitionName: "example" },
React.createElement(
"div",
{ className: "body-container", key: "1" },
this.props.bodyTemplate,
this.props.footerTemplate
)
)
);
}
};
MainTemplate = React.createClass(Template.MainTemplate._instance);var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
Template.MainTemplate.events = {
"scroll": function (event, template) {
var target = $(event.currentTarget);
var href = target.attr("href");
if (href[0] === "#") {
event.preventDefault();
$("body, html, .body-container").animate({ scrollTop: $(href).offset().top }, 600);
}
}
};
})();
//# sourceMappingURL=main.html.jsx.js.map
Whoa, is this some crazy React template thing? Which one?
https://github.com/timbrandin/meteor-react-jsx-templating it allows you to write your code similar to blaze and have it compiled into reacts format. Its a great concept
Sorry, I can’t think of any reasons this doesn’t work. If you have a git repo I can clone, I can try messing around with it.
What is your transition supposed to do?
I think the problem is that the ReactCSSTrasitionGroup elements have to directly wrap the dynamic element section of your component. You have a div within the transition group, and then the dynamic elements within that div. Example, I would put the FooTransitionGroup element around a set of li elements that grows as items are added. The transitions are applied directly to the dynamic elements at the moment they are added to or deleted from the DOM.
For Instance transitions work here as listItems are added:
return (
<ul id="suggestions">
<SuggestionsTransitionGroup transitionName='fadein'>
{listItems}
</SuggestionsTransitionGroup>
</ul>
);
but they don’t work here (notice the span):
return (
<ul id="suggestions">
<SuggestionsTransitionGroup transitionName='fadein'>
<span>
{listItems}
</span>
</SuggestionsTransitionGroup>
</ul>
);
Hope that helps.
If you want the elements to do the transition on the initial mount, then you have to a little bit extra. You might want to check the section called “Animate Initial Mounting” https://facebook.github.io/react/docs/animation.html#getting-started
@warmbowski that was it! after changing the transition group to wrap the dynamic elm it worked
however the only thing is I now receive this error
Warning: transition(): tried to perform an animation without an animationend or transitionend event after timeout (5000ms). You should either disable this transition in JS or add a CSS animation/transition.
Any idea as to how to stop it? After this error is thrown I cannot view a page that the error took place on.
@sashko you should check out @timbrandin 's package though for sure and mess around with it he has a few examples out on git
I get that warning too, when working with straight React and JSX. But it comes only intermittently, usually on hot reloads, and goes away after a page refresh. And even when it does pop up, my page still renders just fine. I am not sure what’s throwing that. If anyone can clarify this warning, that sure would be helpful.
1 Like
I gotta say that the paradigm of working with transitions and animations through a virtual DOM is interesting, but it seems kind of limited. Using transitiongroup seems to have a limited number of events that trigger the addition of classes. I actually added the same transitions with straight CSS to see what would happen and it was not good.
It all makes me wonder if it limits UI/UX designers when using React, and now I wonder if designers like or hate React.
1 Like