From 7d89ee1383fbd257214748b5c351d2c80e6859a7 Mon Sep 17 00:00:00 2001 From: cristoferespindola <30659659+cristoferespindola@users.noreply.github.com> Date: Fri, 21 Jul 2023 16:33:46 -0300 Subject: [PATCH] feat: fix animations --- .gitignore | 7 +++++-- package.json | 2 ++ .../outline-breadcrumbs/src/outline-breadcrumbs.css | 5 ++++- packages/outline-button/src/outline-button.css | 4 ++-- packages/outline-modal/src/outline-modal.css | 6 +++++- packages/outline-modal/src/outline-modal.ts | 11 +++++++++++ yarn.lock | 7 +++++++ 7 files changed, 36 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index fa10011ea..efc9d6883 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,7 @@ .aws .npmrc -# General +# General .env-local .hidden *~ @@ -60,7 +60,7 @@ mutagen.yml.lock www/ .turbo -# Outline specific +# Outline specific custom-elements.json component-list.json resolved-outline-config.ts @@ -68,3 +68,6 @@ resolved-tailwind-config.ts safelist.txt *.lit.ts *.generated.css + +# env +.env.local \ No newline at end of file diff --git a/package.json b/package.json index 0f5e18a19..4096c04e3 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "reset:install": "yarn install", "restart": "yarn reset && yarn start", "start": "yarn storybook dev -p ${npm_package_storybook_port}", + "start:local": "yarn storybook dev -p 7777", "storybook": "storybook", "storybook:build": "storybook build", "test": "turbo run test" @@ -109,6 +110,7 @@ "lint-staged": "^10.5.4", "lit-analyzer": "^1.2.1", "lit-html": "^2.3.1", + "@lit-labs/motion": "^1.0.0", "npm-run-all": "^4.1.5", "postcss": "8.4.8", "postcss-custom-properties": "12.1.8", diff --git a/packages/outline-breadcrumbs/src/outline-breadcrumbs.css b/packages/outline-breadcrumbs/src/outline-breadcrumbs.css index abe8b0b5d..dfa8a01b4 100644 --- a/packages/outline-breadcrumbs/src/outline-breadcrumbs.css +++ b/packages/outline-breadcrumbs/src/outline-breadcrumbs.css @@ -8,9 +8,12 @@ a, ::slotted(a) { - @apply font-body transition-colors duration-300; + @apply font-body; text-decoration: var(--outline-breadcrumb--link-decoration--computed); color: var(--outline-breadcrumb--link-color--computed); + transition-property: color, text-decoration; + transition-timing-function: ease-in; + transition-duration: 300ms; } a:hover, diff --git a/packages/outline-button/src/outline-button.css b/packages/outline-button/src/outline-button.css index 39b1da63b..c02656565 100644 --- a/packages/outline-button/src/outline-button.css +++ b/packages/outline-button/src/outline-button.css @@ -22,8 +22,8 @@ align-items: center; cursor: pointer; transition-property: color, background-color, border-color, - text-decoration-color, fill, stroke, outline, outline-color; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + text-decoration-color, fill, stroke, outline, outline-color, box-shadow; + transition-timing-function: ease-in; transition-duration: 300ms; text-decoration-line: none; outline: none; diff --git a/packages/outline-modal/src/outline-modal.css b/packages/outline-modal/src/outline-modal.css index bab801cdb..75e96a220 100644 --- a/packages/outline-modal/src/outline-modal.css +++ b/packages/outline-modal/src/outline-modal.css @@ -1,6 +1,10 @@ #overlay { - @apply fixed top-0 left-0 right-0 bottom-0 z-50 flex items-center justify-center bg-outline-black bg-opacity-60; + @apply fixed top-0 left-0 right-0 bottom-0 z-50 flex items-center justify-center bg-outline-black bg-opacity-60 transition-opacity; background-color: rgb(0, 0, 0, var(--tw-bg-opacity)); + opacity: 0; +} +#overlay.open { + opacity: 1; } #container { diff --git a/packages/outline-modal/src/outline-modal.ts b/packages/outline-modal/src/outline-modal.ts index bc646cba9..c4927c836 100644 --- a/packages/outline-modal/src/outline-modal.ts +++ b/packages/outline-modal/src/outline-modal.ts @@ -1,4 +1,5 @@ import { html, TemplateResult, CSSResultGroup } from 'lit'; +import { animate, fadeIn, fadeOut } from '@lit-labs/motion'; import { customElement, property, query, state } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; @@ -94,6 +95,9 @@ export class OutlineModal private _overlayTemplate(): TemplateResult { let template = html``; + const keyFrameOptions = { + duration: 300, + }; if (this.isOpen) { template = html` @@ -103,6 +107,13 @@ export class OutlineModal class="${this.size}" @click="${this._handleOverlayClick}" @keydown="${this._handleOverlayKeydown}" + ${animate({ + properties: ['opacity'], + in: fadeIn, + out: fadeOut, + skipInitial: false, + keyframeOptions: keyFrameOptions, + })} >