{{#each things as thing}}
	{{#if visible}}
		<p transition:foo>{{thing}}</p>
	{{/if}}
{{/each}}

<script>
	export default {
		transitions: {
			foo: function ( node, params ) {
				return {
					duration: 100,
					tick: t => {
						node.foo = t;
					}
				};
			}
		},

		oncreate() {
			this.intros = [];
			this.outros = [];
			this.introCount = 0;
			this.outroCount = 0;

			this.on('intro.start', ({ node }) => {
				this.intros.push(node.textContent);
				this.introCount += 1;
			});

			this.on('intro.end', () => {
				this.introCount -= 1;
			});

			this.on('outro.start', ({ node }) => {
				this.outros.push(node.textContent);
				this.outroCount += 1;
			});

			this.on('outro.end', () => {
				this.outroCount -= 1;
			});
		}
	};
</script>