Skip to content
This repository was archived by the owner on Oct 24, 2023. It is now read-only.

Commit e2e6629

Browse files
acidjazzTheAlexLichter
acidjazz
authored and
TheAlexLichter
committed
feat: add modal transition (#59)
1 parent 421e07b commit e2e6629

File tree

3 files changed

+152
-119
lines changed

3 files changed

+152
-119
lines changed

‎assets/styles/animations.pcss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,34 @@
5757
.transition-all-300 {
5858
transition: all 0.3s;
5959
}
60+
61+
.animodal-enter-active,
62+
.animodal-leave-active {
63+
transition: opacity 0.5s ease 0s;
64+
}
65+
.animodal-enter-active .animodal-inner,
66+
.animodal-leave-active .animodal-inner {
67+
transition: transform 0.4s ease 0.1s, opacity 0.4s ease 0.1s;
68+
}
69+
.animodal-enter-active .modal-close,
70+
.animodal-leave-active .modal-close {
71+
transition: transform 0.2s ease 0.2s, opacity 0.2s ease 0.2s;
72+
}
73+
.animodal-leave-active .animodal-inner {
74+
transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
75+
}
76+
.animodal-enter,
77+
.animodal-leave-to {
78+
opacity: 0;
79+
}
80+
.animodal-enter .animodal-inner,
81+
.animodal-leave-to .animodal-inner {
82+
transform: scale(0.9);
83+
opacity: 0;
84+
}
85+
.animodal-enter .modal-close,
86+
.animodal-leave-to .modal-close {
87+
opacity: 0;
88+
transform: scale(0);
89+
}
90+

‎components/ContactUsModal.vue

Lines changed: 120 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,136 @@
11
<template>
2-
<div class="fixed pin-t w-full h-screen bg-rains-trans z-20 overflow-hidden md:overflow-y-scroll text-white p-4 lg:p-8 lg:pt-0 xl:p-16 text-2xl lg:text-3xl transition-all">
3-
<button
4-
class="close-button"
5-
@click="$emit('close')"
6-
/>
7-
<div class="m-4 mt-0 lg:m-16 xl:m-32 mx-auto flex flex-col items-center justify-center">
8-
<h2 class="text-white text-2xl md:text-3xl xl:text-5xl text-center lg:text-left capitalize font-normal mb-2 lg:mb-4 xl:mb-8">
9-
{{ $t('contact.heading') }}
10-
</h2>
11-
<form
12-
v-show="!isSubmitted"
13-
class=" w-5/6 lg:w-2/3 xl:w-1/3 mx-auto flex flex-col items-center text-sm"
14-
@submit.prevent="validate"
15-
>
16-
<div
17-
:class="{'shadow-white': focusedElement === 'name', 'shadow-red': $v.name.$error}"
18-
class="bg-grey-lighter inline-flex rounded items-center px-4 border-white transition-all w-full my-2"
2+
<transition name="animodal">
3+
<div class="fixed pin-t w-full h-screen bg-rains-trans z-20 overflow-hidden md:overflow-y-scroll text-white p-4 lg:p-8 lg:pt-0 xl:p-16 text-2xl lg:text-3xl transition-all">
4+
<button
5+
class="close-button modal-close"
6+
@click="$emit('close')"
7+
/>
8+
<div class="m-4 mt-0 lg:m-16 xl:m-32 mx-auto flex flex-col items-center justify-center animodal-inner">
9+
<h2 class="text-white text-2xl md:text-3xl xl:text-5xl text-center lg:text-left capitalize font-normal mb-2 lg:mb-4 xl:mb-8">
10+
{{ $t('contact.heading') }}
11+
</h2>
12+
<form
13+
v-show="!isSubmitted"
14+
class=" w-5/6 lg:w-2/3 xl:w-1/3 mx-auto flex flex-col items-center text-sm"
15+
@submit.prevent="validate"
1916
>
20-
<label
21-
for="name"
22-
class="text-developmint-darker whitespace-no-wrap"
17+
<div
18+
:class="{'shadow-white': focusedElement === 'name', 'shadow-red': $v.name.$error}"
19+
class="bg-grey-lighter inline-flex rounded items-center px-4 border-white transition-all w-full my-2"
2320
>
24-
Name
25-
</label>
26-
<input
27-
id="name"
28-
v-model.trim="$v.name.$model"
29-
class="appearance-none bg-transparent py-4 px-2 mx-2 md:mx-0 md:px-8 w-5/6 md:w-full text-developmint-darkest"
30-
type="text"
31-
@focus="focusedElement = 'name'"
32-
@blur="focusedElement = ''"
21+
<label
22+
for="name"
23+
class="text-developmint-darker whitespace-no-wrap"
24+
>
25+
Name
26+
</label>
27+
<input
28+
id="name"
29+
v-model.trim="$v.name.$model"
30+
class="appearance-none bg-transparent py-4 px-2 mx-2 md:mx-0 md:px-8 w-5/6 md:w-full text-developmint-darkest"
31+
type="text"
32+
@focus="focusedElement = 'name'"
33+
@blur="focusedElement = ''"
34+
>
35+
</div>
36+
<span
37+
v-show="$v.name.$error"
38+
class="text-sm self-start ml-2 mb-4 text-red-light"
3339
>
34-
</div>
35-
<span
36-
v-show="$v.name.$error"
37-
class="text-sm self-start ml-2 mb-4 text-red-light"
38-
>
39-
Please type a valid name
40-
</span>
41-
<div
42-
:class="{'shadow-white': focusedElement === 'email', 'shadow-red': $v.email.$error}"
43-
class="bg-grey-lighter inline-flex rounded items-center px-4 border-white transition-all w-full my-2"
44-
>
45-
<label
46-
for="email"
47-
class="text-developmint-darker whitespace-no-wrap"
40+
Please type a valid name
41+
</span>
42+
<div
43+
:class="{'shadow-white': focusedElement === 'email', 'shadow-red': $v.email.$error}"
44+
class="bg-grey-lighter inline-flex rounded items-center px-4 border-white transition-all w-full my-2"
4845
>
49-
E-Mail
50-
</label>
51-
<input
52-
id="email"
53-
v-model.trim="$v.email.$model"
54-
class="appearance-none bg-transparent py-4 px-2 mx-2 md:mx-0 md:px-8 w-5/6 md:w-full text-developmint-darkest"
55-
type="email"
56-
@focus="focusedElement = 'email'"
57-
@blur="focusedElement = ''"
46+
<label
47+
for="email"
48+
class="text-developmint-darker whitespace-no-wrap"
49+
>
50+
E-Mail
51+
</label>
52+
<input
53+
id="email"
54+
v-model.trim="$v.email.$model"
55+
class="appearance-none bg-transparent py-4 px-2 mx-2 md:mx-0 md:px-8 w-5/6 md:w-full text-developmint-darkest"
56+
type="email"
57+
@focus="focusedElement = 'email'"
58+
@blur="focusedElement = ''"
59+
>
60+
</div>
61+
<span
62+
v-show="$v.email.$error"
63+
class="text-sm self-start ml-2 mb-4 text-red-light"
5864
>
59-
</div>
60-
<span
61-
v-show="$v.email.$error"
62-
class="text-sm self-start ml-2 mb-4 text-red-light"
63-
>
64-
Please insert a valid E-Mail
65-
</span>
65+
Please insert a valid E-Mail
66+
</span>
67+
<div
68+
:class="{'shadow-white': focusedElement === 'msg', 'shadow-red': $v.msg.$error}"
69+
class="bg-grey-lighter inline-flex flex-col rounded px-4 border-white transition-all w-full my-2"
70+
>
71+
<label
72+
for="msg"
73+
class="py-4 text-developmint-darker"
74+
>
75+
{{ $t('contact.fields.tell') }}
76+
</label>
77+
<textarea
78+
id="msg"
79+
v-model.trim="$v.msg.$model"
80+
class="appearance-none bg-transparent text-developmint-darkest resize-none"
81+
rows="6"
82+
@focus="focusedElement='msg'"
83+
@blur="focusedElement = ''"
84+
/>
85+
</div>
86+
<span
87+
v-show="$v.msg.$error"
88+
class="text-xm self-start ml-2 mb-4 text-red-light"
89+
>
90+
Please provide a valid message with at least 25 characters
91+
</span>
92+
<p class="text-xs md:text-base my-4 px-2 text-grey-light">
93+
We use the data you provide us through this form only to process your contact request! You
94+
find more information in our
95+
<NuxtLink
96+
:to="localePath('privacy')"
97+
tabindex="-1"
98+
class="text-white hover:text-developmint-lighter"
99+
>
100+
Privacy Policy
101+
</NuxtLink>
102+
</p>
103+
<div class="flex justify-between lg:block lg:ml-auto">
104+
<button
105+
class="lg:hidden mr-4 mt-4 rounded hover:border-yellow transition-all hover:text-yellow px-6 py-3 border border-yellow-dark text-grey-light"
106+
@click.prevent="$emit('close')"
107+
>
108+
{{ $t('contact.buttons.back') }}
109+
</button>
110+
<button
111+
:class="submitButtonClasses"
112+
:disabled="submissionDisabled"
113+
type="submit"
114+
>
115+
{{ $t('contact.buttons.submit') }}
116+
</button>
117+
</div>
118+
</form>
66119
<div
67-
:class="{'shadow-white': focusedElement === 'msg', 'shadow-red': $v.msg.$error}"
68-
class="bg-grey-lighter inline-flex flex-col rounded px-4 border-white transition-all w-full my-2"
120+
v-show="isSubmitted"
121+
class="text-2xl text-developmint"
69122
>
70-
<label
71-
for="msg"
72-
class="py-4 text-developmint-darker"
73-
>
74-
{{ $t('contact.fields.tell') }}
75-
</label>
76-
<textarea
77-
id="msg"
78-
v-model.trim="$v.msg.$model"
79-
class="appearance-none bg-transparent text-developmint-darkest resize-none"
80-
rows="6"
81-
@focus="focusedElement='msg'"
82-
@blur="focusedElement = ''"
83-
/>
123+
Thanks for your submission!
84124
</div>
85-
<span
86-
v-show="$v.msg.$error"
87-
class="text-xm self-start ml-2 mb-4 text-red-light"
125+
<div
126+
v-if="error"
127+
class="text-2xl text-red-dark"
88128
>
89-
Please provide a valid message with at least 25 characters
90-
</span>
91-
<p class="text-xs md:text-base my-4 px-2 text-grey-light">
92-
We use the data you provide us through this form only to process your contact request! You
93-
find more information in our
94-
<NuxtLink
95-
:to="localePath('privacy')"
96-
tabindex="-1"
97-
class="text-white hover:text-developmint-lighter"
98-
>
99-
Privacy Policy
100-
</NuxtLink>
101-
</p>
102-
<div class="flex justify-between lg:block lg:ml-auto">
103-
<button
104-
class="lg:hidden mr-4 mt-4 rounded hover:border-yellow transition-all hover:text-yellow px-6 py-3 border border-yellow-dark text-grey-light"
105-
@click.prevent="$emit('close')"
106-
>
107-
{{ $t('contact.buttons.back') }}
108-
</button>
109-
<button
110-
:class="submitButtonClasses"
111-
:disabled="submissionDisabled"
112-
type="submit"
113-
>
114-
{{ $t('contact.buttons.submit') }}
115-
</button>
129+
An error occurred!
116130
</div>
117-
</form>
118-
<div
119-
v-show="isSubmitted"
120-
class="text-2xl text-developmint"
121-
>
122-
Thanks for your submission!
123-
</div>
124-
<div
125-
v-if="error"
126-
class="text-2xl text-red-dark"
127-
>
128-
An error occurred!
129131
</div>
130132
</div>
131-
</div>
133+
</transition>
132134
</template>
133135

134136
<script>

‎nuxt.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ export default {
209209
paths: [
210210
'i18n/**/*.js'
211211
],
212-
whitelistPatterns: [/cookie-consent/]
212+
whitelistPatterns: [/cookie-consent/, /^ani/]
213213
},
214214

215215
/*

0 commit comments

Comments
 (0)