diff options
| author | Armand Philippot <git@armandphilippot.com> | 2021-10-26 17:23:42 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2021-10-26 17:23:42 +0200 |
| commit | 1d272eac38ebb310e360891a3a717447a1d0547a (patch) | |
| tree | 40cb4ccea0aa41272d40a2d8ff5a4224905cf699 /htdocs | |
| parent | 9f24f7421860a0ca14aa63f551797979e8dc1bf9 (diff) | |
fix(animation): add fade-in animation to project details on large vw
The animation was not triggered because I forgot to add the class in
the right place.
I also increase a little the animation timing.
Diffstat (limited to 'htdocs')
| -rw-r--r-- | htdocs/src/js/app.js | 1 | ||||
| -rw-r--r-- | htdocs/src/scss/base/_animations.scss | 4 |
2 files changed, 3 insertions, 2 deletions
diff --git a/htdocs/src/js/app.js b/htdocs/src/js/app.js index afc766b..b605583 100644 --- a/htdocs/src/js/app.js +++ b/htdocs/src/js/app.js @@ -185,6 +185,7 @@ function getProjectDetails(project) { title.classList.add('project-details__title'); title.textContent = `About ${project.name}`; details.classList.add('project-details'); + if (!isSmallVw()) details.classList.add('fade-in'); details.replaceChildren(title, description, ...techList, ...reposList); return details; diff --git a/htdocs/src/scss/base/_animations.scss b/htdocs/src/scss/base/_animations.scss index 6da56b2..a2df8ab 100644 --- a/htdocs/src/scss/base/_animations.scss +++ b/htdocs/src/scss/base/_animations.scss @@ -65,11 +65,11 @@ } .fade-in { - animation: fadeIn 0.8s; + animation: fadeIn 1s; } .fade-out { - animation: fadeOut 0.8s; + animation: fadeOut 1s; } .slide-in--left { |