How to use the velocity-react.VelocityTransitionGroup function in velocity-react
To help you get started, we’ve selected a few velocity-react examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
opentripplanner / otp-react-redux / build / components / narrative / line-itin / transit-leg-body.js View on Github 
}, alertsExpanded && _react.default.createElement(AlertsBody, {
alerts: leg.alerts,
longDateFormat: longDateFormat,
timeFormat: timeFormat
})), leg.intermediateStops && leg.intermediateStops.length > 0 && _react.default.createElement("div", {
className: "transit-leg-details"
}, _react.default.createElement("div", {
onClick: this._onToggleStopsClick,
className: "header"
}, leg.duration && _react.default.createElement("span", null, "Ride ", (0, _time.formatDuration)(leg.duration)), leg.intermediateStops && _react.default.createElement("span", null, ' / ', leg.intermediateStops.length + 1, ' stops ', _react.default.createElement("i", {
className: "fa fa-caret-".concat(this.state.stopsExpanded ? 'up' : 'down')
})), _react.default.createElement(_viewTripButton.default, {
tripId: leg.tripId,
fromIndex: leg.from.stopIndex,
toIndex: leg.to.stopIndex
})), _react.default.createElement(_velocityReact.VelocityTransitionGroup, {
enter: {
animation: 'slideDown'
},
leave: {
animation: 'slideUp'
}
}, stopsExpanded ? _react.default.createElement(IntermediateStops, {
stops: leg.intermediateStops
}) : null), leg.averageWait && _react.default.createElement("span", null, "Typical Wait: ", (0, _time.formatDuration)(leg.averageWait))));
}
}]);return _react.default.createElement("div", {
className: "route-row"
}, _react.default.createElement("div", {
className: "header"
}, _react.default.createElement("div", {
className: "route-name"
}, _react.default.createElement("b", null, routeName), " To ", pattern.headsign), hasStopTimes && _react.default.createElement("div", {
className: "next-trip-preview"
}, getFormattedStopTime(sortedStopTimes[0], homeTimezone, stopViewerArriving, timeFormat)), _react.default.createElement("div", {
className: "expansion-button-container"
}, _react.default.createElement("button", {
className: "expansion-button",
onClick: this._toggleExpandedView
}, _react.default.createElement(_icon.default, {
type: "chevron-".concat(this.state.expanded ? 'up' : 'down')
})))), _react.default.createElement(_velocityReact.VelocityTransitionGroup, {
enter: {
animation: 'slideDown'
},
leave: {
animation: 'slideUp'
}
}, this.state.expanded && _react.default.createElement("div", null, _react.default.createElement("div", {
className: "trip-table"
}, _react.default.createElement("div", {
className: "header"
}, _react.default.createElement("div", {
className: "cell"
}), _react.default.createElement("div", {
className: "cell time-column"
}, "DEPARTURE"), _react.default.createElement("div", {
className: "cell status-column"style: {
display: 'inline-block'
}
}), _react.default.createElement("div", {
style: {
display: 'inline-block',
marginTop: '2px'
}
}, _react.default.createElement(_reactBootstrap.Label, {
style: {
backgroundColor: backgroundColor === '#ffffff' ? 'rgba(0,0,0,0)' : backgroundColor,
fontSize: 'medium',
fontWeight: 400,
color: color
}
}, _react.default.createElement("b", null, route.shortName), " ", longName))), _react.default.createElement(_velocityReact.VelocityTransitionGroup, {
enter: {
animation: 'slideDown'
},
leave: {
animation: 'slideUp'
}
}, isActive && _react.default.createElement("div", {
style: {
padding: 8
}
}, route.url ? _react.default.createElement("a", {
href: route.url,
target: "_blank"
}, "Route Details") : 'No route URL provided.')));
}
}]);return _react.default.createElement("div", {
className: "leg-body"
}, _react.default.createElement(AccessLegSummary, {
config: config,
leg: leg,
onSummaryClick: this._onSummaryClick,
customIcons: customIcons
}), _react.default.createElement("div", {
onClick: this._onStepsHeaderClick,
className: "steps-header"
}, (0, _time.formatDuration)(leg.duration), leg.steps && _react.default.createElement("span", null, " ", _react.default.createElement("i", {
className: "fa fa-caret-".concat(this.state.expanded ? 'up' : 'down')
}))), this.props.routingType === 'ITINERARY' && _react.default.createElement(_legDiagramPreview.default, {
leg: leg
}), _react.default.createElement(_velocityReact.VelocityTransitionGroup, {
enter: {
animation: 'slideDown'
},
leave: {
animation: 'slideUp'
}
}, this.state.expanded && _react.default.createElement(AccessLegSteps, {
steps: leg.steps
})));
}
}]);href: agencyUrl,
target: "_blank"
}, agencyName, logoUrl && _react.default.createElement("img", {
src: logoUrl,
height: 25,
style: {
marginLeft: '5px'
}
}))), alerts && alerts.length > 0 && _react.default.createElement("div", {
onClick: this._onToggleAlertsClick,
className: "transit-alerts-toggle"
}, _react.default.createElement("i", {
className: "fa fa-exclamation-triangle"
}), " ", alerts.length, " ", pluralize('alert', alerts), ' ', _react.default.createElement("i", {
className: "fa fa-caret-".concat(this.state.alertsExpanded ? 'up' : 'down')
})), _react.default.createElement(_velocityReact.VelocityTransitionGroup, {
enter: {
animation: 'slideDown'
},
leave: {
animation: 'slideUp'
}
}, alertsExpanded && _react.default.createElement(AlertsBody, {
alerts: leg.alerts,
longDateFormat: longDateFormat,
timeFormat: timeFormat
})), leg.intermediateStops && leg.intermediateStops.length > 0 && _react.default.createElement("div", {
className: "transit-leg-details"
}, _react.default.createElement("div", {
onClick: this._onToggleStopsClick,
className: "header"
}, leg.duration && _react.default.createElement("span", null, "Ride ", (0, _time.formatDuration)(leg.duration)), leg.intermediateStops && _react.default.createElement("span", null, ' / ', leg.intermediateStops.length + 1, ' stops ', _react.default.createElement("i", {var _this$props2 = this.props,
icon = _this$props2.icon,
summary = _this$props2.summary,
description = _this$props2.description;
return _react.default.createElement("div", {
className: "trip-detail"
}, _react.default.createElement("div", {
className: "icon"
}, icon), _react.default.createElement("div", {
className: "summary"
}, summary, description && _react.default.createElement(_reactBootstrap.Button, {
className: "expand-button clear-button-formatting",
onClick: this._toggle
}, _react.default.createElement("i", {
className: "fa fa-question-circle"
})), _react.default.createElement(_velocityReact.VelocityTransitionGroup, {
enter: {
animation: 'slideDown'
},
leave: {
animation: 'slideUp'
}
}, this.state.expanded && _react.default.createElement("div", {
className: "description"
}, _react.default.createElement(_reactBootstrap.Button, {
className: "hide-button clear-button-formatting",
onClick: this._onHideClick
}, _react.default.createElement("i", {
className: "fa fa-close"
})), description))));
}
}]);velocity-react
React components to wrap Velocity animations
