feat: toggling AnimationForm on 'Customize this animation' anchor click

Author: igorMSoares

docs/.vitepress/components/AnimationForm.vue

@@ -83,7 +83,7 @@
 </script>
 
 <template>
-  <Container class="form--container">
+  <Container class="form--container js-anim--collapsed">
     <div class="column">
       <div class="row">
         <FormField

docs/.vitepress/components/Container.vue

@@ -10,5 +10,6 @@
     border-radius: 0.5rem;
     padding: 1rem;
     margin: 1.5rem auto 3rem auto;
+    min-width: 350px;
   }
 </style>

docs/.vitepress/components/Example.vue

@@ -3,6 +3,7 @@
   import Button from './Button.vue';
   import Content from './Content.vue';
   import AnimationForm from './AnimationForm.vue';
+  import jsCssAnimations from '../../../js-css-animations/js-css-animations';
 
   defineEmits(['resetAnimation']);
 </script>
@@ -11,6 +12,7 @@
   export default {
     props: {
       animationFn: Function,
+      animationName: String,
       title: String,
       btnList: Array,
       contentList: Array,
@@ -19,6 +21,10 @@
     },
     mounted() {
       this.animationFn();
+      jsCssAnimations.init.fade({
+        trigger: `.customize--anchor__${this.animationName}`,
+        targetSelector: `.customize--form__${this.animationName}`,
+      });
     },
     methods: {
       titleId() {
@@ -34,12 +40,20 @@
 <template>
   <Container>
     <h3 :id="titleId()" class="title">{{ title }}</h3>
-    <a href="#">Customize the animation</a>
-    <AnimationForm
-      :initial="animOpts"
-      :fields-list="$props.fieldsList"
-      @resetAnimation="opts => $emit('resetAnimation', opts)"
-    />
+    <a
+      href="#"
+      class="customize--anchor"
+      :class="`customize--anchor__${animationName}`"
+      >Customize this animation</a
+    >
+    <div>
+      <AnimationForm
+        :class="`customize--form__${animationName}`"
+        :initial="animOpts"
+        :fields-list="$props.fieldsList"
+        @resetAnimation="opts => $emit('resetAnimation', opts)"
+      />
+    </div>
     <div class="buttons">
       <Button v-for="btn in btnList" v-bind="btn" />
     </div>
@@ -67,6 +81,11 @@
 
   .title {
     margin-top: 0;
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .customize--anchor {
+    display: flex;
+    justify-content: right;
   }
 </style>

docs/.vitepress/components/FormField.vue

@@ -105,7 +105,9 @@
   }
 
   input:focus,
-  select:focus {
+  select:focus,
+  input:hover,
+  select:hover {
     border: 1px solid var(--vp-c-green-lighter);
   }
 

docs/examples/index.md

@@ -119,6 +119,7 @@ aside: false
 
 <Example
 :animation-fn="slideAnimations"
+:animation-name="'slide'"
 :title="'Slide Animations'"
 :btn-list="examples.slide.btnList"
 :content-list="examples.slide.contentList"
@@ -150,6 +151,7 @@ jsCssAnimations.init.slideRight({
 
 <Example
 :animation-fn="fadeAnimation"
+:animation-name="'fade'"
 :title="'Fade In / Out'"
 :btn-list="examples.fade.btnList"
 :content-list="examples.fade.contentList"
@@ -176,6 +178,7 @@ jsCssAnimations.init.fade({
 
 <Example
 :animation-fn="collapseAnimation"
+:animation-name="'collapse'"
 :title="'Collapse/Expand'"
 :btn-list="examples.collapse.btnList"
 :content-list="examples.collapse.contentList"