From 6c65750fc0065fb99482a8a5771d0b9316ba90b6 Mon Sep 17 00:00:00 2001 From: tikagan <30419893+tikagan@users.noreply.github.com> Date: Wed, 12 Jul 2023 16:37:54 -0400 Subject: [PATCH 1/2] style: card deck different time delays for incoming cards --- components/sliders/circular-slider-a.vue | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/components/sliders/circular-slider-a.vue b/components/sliders/circular-slider-a.vue index d5e207c..7dcd9cf 100644 --- a/components/sliders/circular-slider-a.vue +++ b/components/sliders/circular-slider-a.vue @@ -396,15 +396,23 @@ img { &.position-3 { transition: transform 500ms ease-in-out 40ms, z-index 500ms ease-in-out 40ms; } - &.position-4, - &.position-5, + &.position-4{ + transition: transform 500ms ease-in-out 100ms, z-index 500ms ease-in-out 10ms; + } + &.position-5 { + transition: transform 500ms ease-out 130ms, z-index 500ms ease-out 100ms; + } &.position-6 { - transition: transform 500ms ease-in-out 150ms, z-index 500ms ease-in-out 250ms; + transition: transform 500ms ease-in 170ms, z-index 500ms ease-in 0ms; } } &.right { - &.position-2, - &.position-3, + &.position-2 { + transition: transform 500ms ease-in 170ms, z-index 500ms ease-in 100ms; + } + &.position-3 { + transition: transform 500ms ease-out 130ms, z-index 500ms ease-out 100ms; + } &.position-4 { transition: transform 500ms ease-in-out 100ms, z-index 500ms ease-in-out 100ms; } From 8405d0703efa559096c61088696387b65f712811 Mon Sep 17 00:00:00 2001 From: tikagan <30419893+tikagan@users.noreply.github.com> Date: Wed, 12 Jul 2023 16:54:56 -0400 Subject: [PATCH 2/2] style: timing delay tweak to stop z-index glitch --- components/sliders/circular-slider-a.vue | 2 +- content/core/index.json | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/components/sliders/circular-slider-a.vue b/components/sliders/circular-slider-a.vue index 7dcd9cf..4c5318b 100644 --- a/components/sliders/circular-slider-a.vue +++ b/components/sliders/circular-slider-a.vue @@ -414,7 +414,7 @@ img { transition: transform 500ms ease-out 130ms, z-index 500ms ease-out 100ms; } &.position-4 { - transition: transform 500ms ease-in-out 100ms, z-index 500ms ease-in-out 100ms; + transition: transform 500ms ease-in-out 100ms, z-index 500ms ease-in-out 10ms; } &.position-5, &.position-6 { diff --git a/content/core/index.json b/content/core/index.json index b7edba9..a15b513 100644 --- a/content/core/index.json +++ b/content/core/index.json @@ -369,7 +369,6 @@ } ] } - ] } }