marszall87/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.list {
  width: 480px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  box-sizing: border-box;
  display: block;
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid black;
  margin: 20px;
  line-height: 100px;
  text-align: center;
  transition: 1s all;
}

.v-enter {
  opacity: 0;
}
</style>
</head>
<body>
<script src="https://unpkg.com/vue@2.4.2"></script>
<script src="https://cdn.rawgit.com/Marak/faker.js/master/examples/browser/js/faker.js"></script>

  <div id="app">
    <List :items="items"/>
  </div>
<script id="jsbin-javascript">
'use strict';

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

var createItem = function createItem() {
  return {
    id: faker.random.uuid(),
    name: faker.name.firstName()
  };
};

var Item = {
  props: ['name'],
  template: '<div class="card">{{name}}</div>'
};

var List = {
  props: ['items'],
  components: { Item: Item },
  template: '<div><button @click="push">push</button><button @click="replace">replace</button><transition-group tag="div" class="list"><Item v-for="item in items" :name="item.name" :key="item.id"/></transition-group></div>',
  methods: {
    push: function push() {
      this.items.push(createItem());
    },
    replace: function replace() {
      this.items = [].concat(_toConsumableArray(this.items), [createItem()]);
    }
  }
};

new Vue({
  el: '#app',
  components: { List: List },
  data: {
    items: [createItem(), createItem(), createItem()]
  }
});
</script>


<script id="jsbin-source-css" type="text/css">.list {
  width: 480px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  box-sizing: border-box;
  display: block;
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid black;
  margin: 20px;
  line-height: 100px;
  text-align: center;
  transition: 1s all;
}

.v-enter {
  opacity: 0;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">const createItem = () => ({
  id: faker.random.uuid(),
  name: faker.name.firstName()
});

const Item = {
  props: ['name'],
  template: '<div class="card">{{name}}</div>'
};

const List = {
  props: ['items'],
  components: {Item},
  template: '<div><button @click="push">push</button><button @click="replace">replace</button><transition-group tag="div" class="list"><Item v-for="item in items" :name="item.name" :key="item.id"/></transition-group></div>',
  methods: {
    push() {
       this.items.push(createItem());
    },
    replace() {
       this.items = [...this.items, createItem()];
    }
  }
};

new Vue({
  el: '#app',
  components: {List},
  data: {
    items: [createItem(), createItem(), createItem()]
  }
});</script></body>
</html>

## jsbin.nivori.css
.list {
  width: 480px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  box-sizing: border-box;
  display: block;
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid black;
  margin: 20px;
  line-height: 100px;
  text-align: center;
  transition: 1s all;
}

.v-enter {
  opacity: 0;
}

## jsbin.nivori.js
'use strict';

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

var createItem = function createItem() {
  return {
    id: faker.random.uuid(),
    name: faker.name.firstName()
  };
};

var Item = {
  props: ['name'],
  template: '<div class="card">{{name}}</div>'
};

var List = {
  props: ['items'],
  components: { Item: Item },
  template: '<div><button @click="push">push</button><button @click="replace">replace</button><transition-group tag="div" class="list"><Item v-for="item in items" :name="item.name" :key="item.id"/></transition-group></div>',
  methods: {
    push: function push() {
      this.items.push(createItem());
    },
    replace: function replace() {
      this.items = [].concat(_toConsumableArray(this.items), [createItem()]);
    }
  }
};

new Vue({
  el: '#app',
  components: { List: List },
  data: {
    items: [createItem(), createItem(), createItem()]
  }
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.list {
	width: 480px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

	.card {
	box-sizing: border-box;
	display: block;
	width: 100px;
	height: 100px;
	background: white;
	border: 1px solid black;
	margin: 20px;
	line-height: 100px;
	text-align: center;
	transition: 1s all;
	}

	.v-enter {
	opacity: 0;
	}
	</style>
	</head>
	<body>
	<script src="https://unpkg.com/vue@2.4.2"></script>
	<script src="https://cdn.rawgit.com/Marak/faker.js/master/examples/browser/js/faker.js"></script>

	<div id="app">
	<List :items="items"/>
	</div>
	<script id="jsbin-javascript">
	'use strict';

	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

	var createItem = function createItem() {
	return {
	id: faker.random.uuid(),
	name: faker.name.firstName()
	};
	};

	var Item = {
	props: ['name'],
	template: '<div class="card">{{name}}</div>'
	};

	var List = {
	props: ['items'],
	components: { Item: Item },
	template: '<div><button @click="push">push</button><button @click="replace">replace</button><transition-group tag="div" class="list"><Item v-for="item in items" :name="item.name" :key="item.id"/></transition-group></div>',
	methods: {
	push: function push() {
	this.items.push(createItem());
	},
	replace: function replace() {
	this.items = [].concat(_toConsumableArray(this.items), [createItem()]);
	}
	}
	};

	new Vue({
	el: '#app',
	components: { List: List },
	data: {
	items: [createItem(), createItem(), createItem()]
	}
	});
	</script>


	<script id="jsbin-source-css" type="text/css">.list {
	width: 480px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

	.card {
	box-sizing: border-box;
	display: block;
	width: 100px;
	height: 100px;
	background: white;
	border: 1px solid black;
	margin: 20px;
	line-height: 100px;
	text-align: center;
	transition: 1s all;
	}

	.v-enter {
	opacity: 0;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">const createItem = () => ({
	id: faker.random.uuid(),
	name: faker.name.firstName()
	});

	const Item = {
	props: ['name'],
	template: '<div class="card">{{name}}</div>'
	};

	const List = {
	props: ['items'],
	components: {Item},
	template: '<div><button @click="push">push</button><button @click="replace">replace</button><transition-group tag="div" class="list"><Item v-for="item in items" :name="item.name" :key="item.id"/></transition-group></div>',
	methods: {
	push() {
	this.items.push(createItem());
	},
	replace() {
	this.items = [...this.items, createItem()];
	}
	}
	};

	new Vue({
	el: '#app',
	components: {List},
	data: {
	items: [createItem(), createItem(), createItem()]
	}
	});</script></body>
	</html>