Luca Colonnello LucaColonnello

Custom CSSTransitionGroup for React

The CSSTransitionGroup in the React Addons works fine for simple things, but since React components don’t have much knowledge of their children, more complex nested components can be re-rendering while the transitions are happening. This can lead to jerky animation.

This example implements a custom AnimationItem component that sits inside the TransitionGroup — note the lack of the CSS prefix there — which has an API for handling the various transition events. I’ve reimplemented the behaviour from the CSSTransitionsGroup in the AnimationItem component but using requestAnimationFrame to wait a render tick before triggering the transition, and Arrival to determine when the transition ends.

Again, it’s unnecessary in this example because the components are so simple, but it makes a massive difference on more complex components.

Forked from Max's Pen [Cus

Less generator mixin by type

Define a generator mixin which use some attributes differents by type. You can use the mixins passing the type you want. Then the mixins generate the attributes for the received type. This simulate a settings object.

A Pen by Luca Colonnello on CodePen.

License.

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="React Menu Content Example">
	<script src="http://fb.me/react-with-addons-0.13.1.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	html,
	body {

	// http://jsfiddle.net/kb3gN/11378/
	// http://stackoverflow.com/questions/22677931/react-js-onchange-event-for-contenteditable/27255103#27255103

	// content editable component
	var ContentEditable = React.createClass({
	render: function(){
	return <div id="contenteditable"
	onInput={this.emitChange}
	onBlur={this.emitChange}
	contentEditable

	// http://stackoverflow.com/questions/6157929/how-to-simulate-a-mouse-click-using-javascript

	function simulate(element, eventName)
	{
	var options = extend(defaultOptions, arguments[2] \|\| {});
	var oEvent, eventType = null;

	for (var name in eventMatchers)
	{
	if (eventMatchers[name].test(eventName)) { eventType = name; break; }

	// http://stackoverflow.com/questions/10656743/how-to-offset-the-center-point-in-google-maps-api-v3

	function offsetCenter(map, latlng, offsetx, offsety) {
	// latlng is the apparent centre-point
	// offsetx is the distance you want that point to move to the right, in pixels
	// offsety is the distance you want that point to move upwards, in pixels
	// offset can be negative
	// offsetx and offsety are both optional

	var scale = Math.pow(2, map.getZoom());

	module.exports = {
	entry: './src/main',
	module: {
	loaders: [
	// Transpile any JavaScript file:
	{
	test: /\.js$/,
	loader: 'webpack-traceur?runtime',
	exclude: /node_modules/ // <<<<===== prevent traceur to modify all from node_modules
	}

	//PhantomJS http://phantomjs.org/ based web crawler Anton Ivanov [email protected] 2012
	//UPDATE: This gist has been made into a Node.js module and now can be installed with "npm install js-crawler"
	//the Node.js version does not use Phantom.JS, but the API available to the client is similar to the present gist

	(function(host) {

	function Crawler() {
	this.visitedURLs = {};
	};

	function getEmSize(el) {
	return Number(getComputedStyle(el, "").fontSize.match(/(\d+(\.\d*)?)px/)[1]);
	}

	// device base font size
	window.getDeviceBaseFontSize = function( ) {
	// check getted yet
	if( !window.__baseDeviceFontSize ) {
	window.__baseDeviceFontSize = 0;

	var iframe = document.createElement( "IFRAME" );
	iframe.style.display = "none";
	document.body.appendChild( iframe );
	var s = "<html><body><"+"/body><"+"/html>";