chore(create-vite): added transition to grow back drop in (#11392)

Hexy32 · web-flow · commit d0757e29380c · 2022-12-17T10:26:59.000+01:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);

Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,7 @@ export class MyElement extends LitElement {`
`58`	`58`	`height: 6em;`
`59`	`59`	`padding: 1.5em;`
`60`	`60`	`will-change: filter;`
	`61`	`+ transition: filter 300ms;`
`61`	`62`	`}`
`62`	`63`	`.logo:hover {`
`63`	`64`	`filter: drop-shadow(0 0 2em #646cffaa);`
Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,7 @@ export class MyElement extends LitElement {`
`65`	`65`	`height: 6em;`
`66`	`66`	`padding: 1.5em;`
`67`	`67`	`will-change: filter;`
	`68`	`+ transition: filter 300ms;`
`68`	`69`	`}`
`69`	`70`	`.logo:hover {`
`70`	`71`	`filter: drop-shadow(0 0 2em #646cffaa);`
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@`
`9`	`9`	`height: 6em;`
`10`	`10`	`padding: 1.5em;`
`11`	`11`	`will-change: filter;`
	`12`	`+ transition: filter 300ms;`
`12`	`13`	`}`
`13`	`14`	`.logo:hover {`
`14`	`15`	`filter: drop-shadow(0 0 2em #646cffaa);`
Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,7 @@`
`32`	`32`	`height: 6em;`
`33`	`33`	`padding: 1.5em;`
`34`	`34`	`will-change: filter;`
	`35`	`+ transition: filter 300ms;`
`35`	`36`	`}`
`36`	`37`	`.logo:hover {`
`37`	`38`	`filter: drop-shadow(0 0 2em #646cffaa);`
Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,7 @@ h1 {`
`48`	`48`	`height: 6em;`
`49`	`49`	`padding: 1.5em;`
`50`	`50`	`will-change: filter;`
	`51`	`+ transition: filter 300ms;`
`51`	`52`	`}`
`52`	`53`	`.logo:hover {`
`53`	`54`	`filter: drop-shadow(0 0 2em #646cffaa);`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ import HelloWorld from './components/HelloWorld.vue'`
`19`	`19`	`height: 6em;`
`20`	`20`	`padding: 1.5em;`
`21`	`21`	`will-change: filter;`
	`22`	`+ transition: filter 300ms;`
`22`	`23`	`}`
`23`	`24`	`.logo:hover {`
`24`	`25`	`filter: drop-shadow(0 0 2em #646cffaa);`