Add "Bindings - Transitions - In-Out" example.

13 - Transitions - TODO/c. In-Out/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "svelte-transitions-in_out",
+  "description": "Bindings - Transitions - In-Out",
+  "version": "1.0.0",
+  "author": "Rick Beerendonk",
+  "license": "EUPL-1.2",
+  "devDependencies": {
+    "cross-env": "7.0.0",
+    "css-loader": "3.4.2",
+    "html-webpack-plugin": "3.2.0",
+    "mini-css-extract-plugin": "0.9.0",
+    "serve": "11.3.0",
+    "style-loader": "1.1.3",
+    "svelte": "3.18.2",
+    "svelte-loader": "2.13.6",
+    "webpack": "4.41.6",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "3.10.3"
+  },
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack",
+    "start": "webpack-dev-server --open"
+  }
+}

13 - Transitions - TODO/c. In-Out/src/App.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { fade } from 'svelte/transition';
+
+  let visible = true;
+</script>
+
+<label>
+  <input type="checkbox" bind:checked={visible} />
+  Visible
+</label>
+
+{#if visible}
+  <h1 in:fade={{ duration: 3000 }} out:fade={{ duration: 400 }}>
+    Hello Svelte!
+  </h1>
+{/if}
+
+<!-- European Union Public License version 1.2 -->
+<!-- Copyright © 2020 Rick Beerendonk -->

13 - Transitions - TODO/c. In-Out/src/main.js

@@ -0,0 +1,10 @@
+/*! European Union Public License version 1.2 !*/
+/*! Copyright © 2020 Rick Beerendonk          !*/
+
+import App from './App';
+
+const app = new App({
+  target: document.body
+});
+
+export default app;

13 - Transitions - TODO/c. In-Out/webpack.config.js

@@ -0,0 +1,64 @@
+/*! European Union Public License version 1.2 !*/
+/*! Copyright © 2020 Rick Beerendonk          !*/
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const mode = process.env.NODE_ENV || 'development';
+const prod = mode === 'production';
+
+module.exports = {
+  entry: {
+    bundle: ['./src/main.js']
+  },
+  resolve: {
+    extensions: ['.mjs', '.js', '.svelte']
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js',
+    chunkFilename: '[name].[id].js'
+  },
+  devtool: prod ? false : 'source-map',
+  devServer: {
+    contentBase: './dist',
+    hot: true,
+    port: 9100
+  },
+  mode,
+  module: {
+    rules: [
+      {
+        test: /\.svelte$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            dev: true,
+            emitCss: true,
+            hotReload: true
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          /**
+           * MiniCssExtractPlugin doesn't support HMR.
+           * For developing, use 'style-loader' instead.
+           * */
+          prod ? MiniCssExtractPlugin.loader : 'style-loader',
+          'css-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Bindings - Transitions - In-Out'
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    })
+  ]
+};