This is deprecated in favor of https://github.com/react-component/animate
react-component / css-transition-group Goto Github PK
View Code? Open in Web Editor NEWstandalone CSSTransitionGroup for React.addons.CSSTransitionGroup
standalone CSSTransitionGroup for React.addons.CSSTransitionGroup
This is deprecated in favor of https://github.com/react-component/animate
Hi Guys,
Is it possible to switch between the transitionName
I am trying to make a stack animation let me give a preview of what I am doing.
Step 1. I am render list of array using appear animation using class "A"
Step 2. on click of one obj the existing array should leave using class "A"
Step 3. The selected obj will will animate using appear animation using class "B"
Step 4. When I close the selected obj animate using leave animation using class "B"
back to step one.
I am wrapping the entire component with
Is it possible to execute the above mentioned using ReactCSSTransitionGroup ?
I used webpack + gulp + react + jquery(v 2.2.0) to build my proj.
I kind of use this lib to make a animation like this:
import $ from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactTransitions from 'react-addons-css-transition-group';
...
render() {
let url = this.state.picList[this.state.focus];
return (
<div className='gb-slider'>
<ReactTransitions
transitionName='anim'
transitionEnterTimeout={300}
transitionLeaveTimeout={500}
>
<div className='viewer' key={ url } style={{ backgroundImage: 'url(' + url + ')' }} />
</ReactTransitions>
</div>
);
}
But I saw an un-exist request error in the console when I run the script after building like below:
I'm pretty sure it 's caused by this lib because if I removed the animation sentences from the script, the un-exist request error would disappeared.
And since I'm using jquery 2.2.0, not 1.7.2, I'm not sure if the old version jquery is used by this lib, cause if I removed the anim sentences, the old-version jquery initiator disappeared etither.
Hi!
I am getting the error while integration with react-boilerplate ,
ERROR in ./node_modules/preact-css-transition-group/src/CSSTransitionGroup.js 20:21
Module parse failed: Unexpected token (20:21)
You may need an appropriate loader to handle this file type.
|
| export class CSSTransitionGroup extends Component {
static defaultProps = {
| component: 'span',
| transitionEnter: true,
Please help me how to solve this issue?
I'm using react 0.14.3
, react-addons-css-transition-group 0.14.7
, css-loader(css-modules now default module in webpack css-loader) 0.23.1
.
According to CSS Modules + ReactCSSTransitionGroup in React 0.14, css-modules
's class selector generation behavior doesn't fit to CSSTransitionGroup
component.
I guess css-modules
is aiming to capsulize component, and I guess css-transition-group
has same goal.
I want to ask how do you(community members) think about adding prefix
and postfix
attribute into CSSTranstionGroup JSX tag.
If this idea doesn't against any concerns, I want to start implement it.
http://react-component.github.io/css-transition-group/build/examples/hide-todo.html
var Todo = React.createClass({
getDefaultProps: function () {
return {
visible: true,
end: function () {
}
}
},
componentWillUnmount: function () {
console.log('componentWillUnmount');
console.log(this.props.children);
this.props.end();
},
render: function () {
var props = this.props;
return <div onClick={this.props.onClick}
style={{display: props.visible ? 'block' : 'none'}}
className="item">
{props.children}
</div>;
}
});
var TodoList = React.createClass({
getInitialState: function () {
return {
items: [
{content: 'hello', visible: true},
{content: 'world', visible: true},
{content: 'click', visible: true},
{content: 'me', visible: true}]
};
},
handleHide: function (i, item) {
var newItems = this.state.items.concat([]);
newItems.forEach((n, index)=> {
newItems[index] = assign({}, n, {
visible: true
});
});
newItems[i] = assign({}, item, {
visible: false
});
this.setState({items: newItems});
},
render: function () {
var items = this.state.items.map(function (item, i) {
return (
<Todo key={item.content}
visible={item.visible}
onClick={this.handleHide.bind(this, i, item)}>
{item.content}
</Todo>
);
}.bind(this));
return (
<div>
<CSSTransitionGroup
showProp="visible"
transitionName="example">
{items}
</CSSTransitionGroup>
</div>
);
}
});
Hello, I try to use your lib but get error by compilation:
Error: Parsing file node_modules/rc-css-transition-group/lib/CSSTransitionGroup.js: Unexpected token (144:11)
How to use build files by import? without JSX syntax?
Console.error
Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('example-enter-active example-enter-active ') contains HTML space characters, which are not valid in tokens.
at addClass (webpack:///./~/preact-css-transition-group/dist/preact-css-transition-group.js?:83:18)
at CSSTransitionGroupChild._this.flushClassNameQueue (webpack:///./~/preact-css-transition-group/dist/preact-css-transition-group.js?:225:5)
I am using preact-waypoint, fetching more data and rendering them as the person scrolls down.
While trying to animate, i was referencing https://facebook.github.io/react/docs/animation.html#high-level-api-reactcsstransitiongroup
Despite the error, the list items, are still rendered (without any transition).
CSS:
.example-enter{
opacity: 0.01;
}
.example-enter.example-enter-active{
opacity: 1;
transition: opacity 500ms ease-in;
}
.example-leave{
opacity: 1;
}
.example-leave.example-leave-active{
opacity: 0.01;
transition: opacity 300ms ease-in;
}
The ContainerComponent goes like this:
class MainOfferContainerInfiniteScroller extends Component {
constructor(props){
super(props)
const eventIds = this.props.eventIds;
const captions = this.props.captions;
const _captions = captions ? captions: {};
const _eventIds = eventIds? eventIds: [];
this.state = {
isLoading: false,
eventIds:_eventIds,
captions: _captions,
data: [],
currentData: [],
countLimit:150
}
this._loadMoreInfiniteContent = this._loadMoreInfiniteContent.bind(this);
this._renderWayPoint = this._renderWayPoint.bind(this)
this._renderContent = this._renderContent.bind(this)
this._handlePositionChange = this._handlePositionChange.bind(this)
}
_handlePositionChange(){
console.info('position changed. ..');
}
_loadMoreInfiniteContent(){
if(nextStart > this.state.countLimit){
console.info('countLimit exceeded, return...');
return;
}
//else fetch more
this.setState({
isLoading: true
})
let nextUrl = get_nextReqUrl();
fetch(nextUrl)
.then((response) => {
return response.json();
}).then((responseData) => {
const _data = responseData.genericOfferItems;
let _nextData = this.state.data;
_nextData = [...this.state.data, ..._data]
this.setState({
data: _nextData,
isLoading: false
})
}).catch((err) => {
console.log('fetch error', err);
});
}
_renderWayPoint(){
if(!this.state.isLoading){
return (<Waypoint
bottomOffset='-500px'
onEnter={this._loadMoreInfiniteContent}
onPositionChange={this._handlePositionChange}/>)
}
}
_renderContent(){
console.log('running _renderContent. . .WTF');
const OfferList = this.state.data.filter(offer=>(
offer.eventId === 'DealofDayOffers'))
.map((thisOffer, i) => (<OfferUnitLi item={thisOffer} i={i}/>))
//return (OfferList)
return (<PreactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{OfferList}
</PreactCSSTransitionGroup>)
}
componentDidMount(){
// +++++ fetchStart +++++ //
fetch(firstReqUrl)
.then((response) => {
return response.json();
}).then((responseData) => {
const _data = responseData.genericOfferItems;
//console.log('consume data: ', _data);
this.setState({data: _data});
//console.log('updatedState: ', this.state);
}).catch((err) => {
//console.log('fetch error', err);
});
// +++++ /fetchStart +++++ //
}
render(){
setTimeout(function(){
const blazy = new Blazy({
loadInvisible: true
});
}, 100);
const {eventIds, captions} = this.props;
const {data} = this.state;
return (<div id="mainWrapperX_newX999" className="inHouseDevs_pageWrapper">
<BtcContainer>
<div className='infiniteLoadCount'>
Items Loaded: {this.state.data.length}
</div>
<div className="OfferContainer">
{eventIds.map(eventId=>{
if(eventId.indexOf('BannerX99') > -1){
return (
<SectionX id={eventId}>
<InnerCard_sectionXWrap>
<ul className="offers_WrapperX99 footerBannerX99_Wrapper">
{data.filter(offer=>(
offer.eventId === eventId))
.map((thisOffer, i) => (<OfferUnitListBannerX item={thisOffer} i={i}/>))
}
</ul>
</InnerCard_sectionXWrap>
</SectionX>
)
}
if(eventId.indexOf('superDod') > -1){
return (
<SectionX id={eventId}>
<InnerCard_sectionXWrap>
<CaptionWrapper caption={captions[eventId]} eventId={eventId} stylingClass="gradient_orangeToRed"/>
<OfferContainerWrapperDoD>
<ul className="offers_WrapperX99 relFontSize_util ">
{data.filter(offer=>(
offer.eventId === eventId))
.map((thisOffer, i) => (<OfferUnitLi item={thisOffer} i={i}/>))
}
</ul>
</OfferContainerWrapperDoD>
</InnerCard_sectionXWrap>
</SectionX>
)
}
else {
return (
<SectionX id="DealofDayOffers" eventId="DealofDayOffers">
<CaptionWrapper caption={captions[eventId]} eventId={eventId} stylingClass="gradient_greenToBlue"/>
<InnerCard_sectionXWrap>
<OfferContainerWrapperNormal>
<div className='infiniteContent_Container' style={{"overflow": "scroll-y"}} >
<ul className="offers_WrapperX99 relFontSize_util " >
{this._renderContent()}
</ul>
<div className='infiniteContent_waypoint'>
{this._renderWayPoint()}
</div>
Loading more items. . .
</div>
</OfferContainerWrapperNormal>
</InnerCard_sectionXWrap>
</SectionX>
)
}
}
)}
</div>
</BtcContainer>
</div>)
}
}
export default MainOfferContainerInfiniteScroller;
ReactCSSTransitionGroup
supports custom classes, could you also support it? if so, i can switch very smoothly to inferno which uses this module.
in the CSSCore.js file on line 41:
'element.className = element.className + ' ' + className;'
throws error:
'Assignment to read-only properties is not allowed in strict mode'
it seems that className for svg is readonly.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.