From d0757e29380c2086f50ef595d468b7f9f911acd0 Mon Sep 17 00:00:00 2001
From: Hex <98916272+Hexy32@users.noreply.github.com>
Date: Sat, 17 Dec 2022 04:26:59 -0500
Subject: [PATCH] chore(create-vite): added transition to grow back drop in
 (#11392)

---
 packages/create-vite/template-lit-ts/src/my-element.ts | 1 +
 packages/create-vite/template-lit/src/my-element.js    | 1 +
 packages/create-vite/template-react-ts/src/App.css     | 1 +
 packages/create-vite/template-react/src/App.css        | 1 +
 packages/create-vite/template-svelte-ts/src/App.svelte | 1 +
 packages/create-vite/template-svelte/src/App.svelte    | 1 +
 packages/create-vite/template-vanilla-ts/src/style.css | 1 +
 packages/create-vite/template-vanilla/style.css        | 1 +
 packages/create-vite/template-vue-ts/src/App.vue       | 1 +
 packages/create-vite/template-vue/src/App.vue          | 1 +
 10 files changed, 10 insertions(+)

diff --git a/packages/create-vite/template-lit-ts/src/my-element.ts b/packages/create-vite/template-lit-ts/src/my-element.ts
index dde5d8cd50de89..8649da3b8b20a7 100644
--- a/packages/create-vite/template-lit-ts/src/my-element.ts
+++ b/packages/create-vite/template-lit-ts/src/my-element.ts
@@ -58,6 +58,7 @@ export class MyElement extends LitElement {
       height: 6em;
       padding: 1.5em;
       will-change: filter;
+      transition: filter 300ms;
     }
     .logo:hover {
       filter: drop-shadow(0 0 2em #646cffaa);
diff --git a/packages/create-vite/template-lit/src/my-element.js b/packages/create-vite/template-lit/src/my-element.js
index effd159f8b5f2d..c7fc6f7e3a313e 100644
--- a/packages/create-vite/template-lit/src/my-element.js
+++ b/packages/create-vite/template-lit/src/my-element.js
@@ -65,6 +65,7 @@ export class MyElement extends LitElement {
         height: 6em;
         padding: 1.5em;
         will-change: filter;
+        transition: filter 300ms;
       }
       .logo:hover {
         filter: drop-shadow(0 0 2em #646cffaa);
diff --git a/packages/create-vite/template-react-ts/src/App.css b/packages/create-vite/template-react-ts/src/App.css
index 2c5e2ef5cd1a2e..b9d355df2a5956 100644
--- a/packages/create-vite/template-react-ts/src/App.css
+++ b/packages/create-vite/template-react-ts/src/App.css
@@ -9,6 +9,7 @@
   height: 6em;
   padding: 1.5em;
   will-change: filter;
+  transition: filter 300ms;
 }
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
diff --git a/packages/create-vite/template-react/src/App.css b/packages/create-vite/template-react/src/App.css
index 2c5e2ef5cd1a2e..b9d355df2a5956 100644
--- a/packages/create-vite/template-react/src/App.css
+++ b/packages/create-vite/template-react/src/App.css
@@ -9,6 +9,7 @@
   height: 6em;
   padding: 1.5em;
   will-change: filter;
+  transition: filter 300ms;
 }
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
diff --git a/packages/create-vite/template-svelte-ts/src/App.svelte b/packages/create-vite/template-svelte-ts/src/App.svelte
index 1e9dc039494ef8..7ffd3bc08bfffb 100644
--- a/packages/create-vite/template-svelte-ts/src/App.svelte
+++ b/packages/create-vite/template-svelte-ts/src/App.svelte
@@ -32,6 +32,7 @@
     height: 6em;
     padding: 1.5em;
     will-change: filter;
+    transition: filter 300ms;
   }
   .logo:hover {
     filter: drop-shadow(0 0 2em #646cffaa);
diff --git a/packages/create-vite/template-svelte/src/App.svelte b/packages/create-vite/template-svelte/src/App.svelte
index 7d6f4ed4339f95..5a186956d302e4 100644
--- a/packages/create-vite/template-svelte/src/App.svelte
+++ b/packages/create-vite/template-svelte/src/App.svelte
@@ -32,6 +32,7 @@
     height: 6em;
     padding: 1.5em;
     will-change: filter;
+    transition: filter 300ms;
   }
   .logo:hover {
     filter: drop-shadow(0 0 2em #646cffaa);
diff --git a/packages/create-vite/template-vanilla-ts/src/style.css b/packages/create-vite/template-vanilla-ts/src/style.css
index ac37d84b935425..7b6efa4177f1f2 100644
--- a/packages/create-vite/template-vanilla-ts/src/style.css
+++ b/packages/create-vite/template-vanilla-ts/src/style.css
@@ -48,6 +48,7 @@ h1 {
   height: 6em;
   padding: 1.5em;
   will-change: filter;
+  transition: filter 300ms;
 }
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
diff --git a/packages/create-vite/template-vanilla/style.css b/packages/create-vite/template-vanilla/style.css
index 12320801d3635d..5b3933e78f60e9 100644
--- a/packages/create-vite/template-vanilla/style.css
+++ b/packages/create-vite/template-vanilla/style.css
@@ -48,6 +48,7 @@ h1 {
   height: 6em;
   padding: 1.5em;
   will-change: filter;
+  transition: filter 300ms;
 }
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
diff --git a/packages/create-vite/template-vue-ts/src/App.vue b/packages/create-vite/template-vue-ts/src/App.vue
index fb679f1d510fc0..bb666a8dec3ee0 100644
--- a/packages/create-vite/template-vue-ts/src/App.vue
+++ b/packages/create-vite/template-vue-ts/src/App.vue
@@ -19,6 +19,7 @@ import HelloWorld from './components/HelloWorld.vue'
   height: 6em;
   padding: 1.5em;
   will-change: filter;
+  transition: filter 300ms;
 }
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
diff --git a/packages/create-vite/template-vue/src/App.vue b/packages/create-vite/template-vue/src/App.vue
index 3f9b55cb79605c..341dbf0b097786 100644
--- a/packages/create-vite/template-vue/src/App.vue
+++ b/packages/create-vite/template-vue/src/App.vue
@@ -19,6 +19,7 @@ import HelloWorld from './components/HelloWorld.vue'
   height: 6em;
   padding: 1.5em;
   will-change: filter;
+  transition: filter 300ms;
 }
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);