docs: add new page-example for animation.

docs/examples/animation.md

@@ -0,0 +1,7 @@
+<script setup>
+import App from '../../examples/simple-animation/App.vue';
+</script>
+
+# Custom Animation
+
+<App/>

docs/examples/list.md

@@ -3,3 +3,4 @@
 - [Multi modal](multi-modals.md)
 - [VueRouter with Modals](vue-router-with-modals.md)
 - [Demo](demo.md)
+- [Animation](animation.md)

examples/simple-animation/App.vue

@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <button @click="openCodeModal">Open Again</button>
+
+        <p>All information about current animation You can found in <b>examples/simple-animation</b></p>
+
+        <modal-container/>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {config, container as ModalContainer, openModal} from "../../plugin/index";
+import ModalProfile from "../pretty-modal/modals/modal-profile.vue";
+import {onBeforeMount, onUnmounted} from "vue";
+
+
+function openCodeModal() {
+	openModal(ModalProfile);
+}
+
+/**
+ * Please do it ones in main.ts, In this example I use onMounted and onUnmounted just for docs. In production, I recommend
+ * init name of animation just in main.ts:
+ *
+ * // main.ts
+ *
+ * config({
+ *     animation: 'your-custom-animation-name'
+ * })
+ * */
+onBeforeMount(() => {
+    config({
+        animation: "custom-fade"
+    })
+})
+onUnmounted(() => {
+    config({
+        animation: "modal-list"
+    })
+})
+
+
+</script>
+<style>
+@import "./../../web/default-style.css";
+
+.custom-fade-enter-active,
+.custom-fade-leave-active,
+.custom-fade-enter-active .modal-item,
+.custom-fade-leave-active .modal-item{
+    transition: 1.0s;
+}
+
+.custom-fade-enter-from .modal-item,
+.custom-fade-leave-to .modal-item{
+    transform: scale(0);
+}
+.custom-fade-enter-from,
+.custom-fade-leave-to {
+    background-color: transparent;
+}
+</style>

examples/simple-animation/main.ts

@@ -0,0 +1,10 @@
+import {createApp} from "vue"
+import App from "./App.vue";
+import {config} from "../../plugin/utils/config";
+
+config({
+	animation: "custom-fade"
+})
+
+createApp(App)
+.mount("#app")

package.json

@@ -5,7 +5,7 @@
   "description": "Simple modal plugin for Vue3",
   "author": "Jenesius",
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
     "build": "npm run rollup",
     "lint": "vue-cli-service lint",
     "rollup": "rollup -c ./rollup.config.js --environment BABEL_ENV:production",

vue.config.js

@@ -17,6 +17,9 @@ module.exports = {
 		},
 		"demo": {
 			entry: "examples/pretty-modal/main.ts"
+		},
+		"simple-animation": {
+			entry: "examples/simple-animation/main.ts"
 		}
 	}
 }

web/src/App.vue

@@ -6,6 +6,7 @@
     <p><a href = "/multi-modals" class = "example-link">Multi Modals</a></p>
     <p><a href = "/vue-router-with-modal" class = "example-link">Modals with VueRouter</a></p>
     <p><a href = "/demo" class = "example-link">Demo Example</a></p>
+    <p><a href = "/simple-animation" class = "example-link">Animation Example</a></p>
 	</div>
 </template>