Updated animation sample
Cagatay Civici
parent
3564633889
commit
78b8c8330a
|
|
@ -4,14 +4,30 @@
|
||||||
Classes to apply during enter and leave animations are specified using the <i>enterFromClass</i>, <i>enterActiveClass</i>, <i>enterToClass</i>, <i>leaveFromClass</i>, <i>leaveActiveClass</i>,<i>leaveToClass</i>properties. In addition in
|
Classes to apply during enter and leave animations are specified using the <i>enterFromClass</i>, <i>enterActiveClass</i>, <i>enterToClass</i>, <i>leaveFromClass</i>, <i>leaveActiveClass</i>,<i>leaveToClass</i>properties. In addition in
|
||||||
case the target is an overlay, <i>hideOnOutsideClick</i> would be handy to hide the target if outside of the popup is clicked.
|
case the target is an overlay, <i>hideOnOutsideClick</i> would be handy to hide the target if outside of the popup is clicked.
|
||||||
</p>
|
</p>
|
||||||
|
<p>First example uses a custom fade animation, and second one uses animate-slide from <NuxtLink to="/tailwind/#animations">tailwind-primeui</NuxtLink> plugin.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex flex-col items-center">
|
<div class="card flex items-center justify-center gap-8">
|
||||||
<div>
|
<div class="flex flex-col items-center">
|
||||||
<Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
|
<div>
|
||||||
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
|
<Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
|
||||||
|
<Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
|
||||||
|
</div>
|
||||||
|
<div class="h-32">
|
||||||
|
<div class="my-hidden animate-duration-500 box1">
|
||||||
|
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="my-hidden animate-duration-500 box">
|
<div class="flex flex-col items-center">
|
||||||
<div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
<div>
|
||||||
|
<Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
|
||||||
|
<Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
|
||||||
|
</div>
|
||||||
|
<div class="h-32">
|
||||||
|
<div class="hidden animate-duration-500 box2 overflow-hidden">
|
||||||
|
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" />
|
<DocSectionCode :code="code" />
|
||||||
|
|
@ -23,21 +39,55 @@ export default {
|
||||||
return {
|
return {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
|
<div class="card flex items-center justify-center gap-8">
|
||||||
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
|
<div class="flex flex-col items-center">
|
||||||
<div class="my-hidden animate-duration-500 box">
|
<div>
|
||||||
<div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
<Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
|
||||||
|
<Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
|
||||||
|
</div>
|
||||||
|
<div class="h-32">
|
||||||
|
<div class="my-hidden animate-duration-500 box1">
|
||||||
|
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<div>
|
||||||
|
<Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
|
||||||
|
<Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
|
||||||
|
</div>
|
||||||
|
<div class="h-32">
|
||||||
|
<div class="hidden animate-duration-500 box2 overflow-hidden">
|
||||||
|
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex flex-col items-center">
|
<div class="card flex items-center justify-center gap-8">
|
||||||
<div>
|
<div class="flex flex-col items-center">
|
||||||
<Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
|
<div>
|
||||||
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
|
<Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
|
||||||
|
<Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
|
||||||
|
</div>
|
||||||
|
<div class="h-32">
|
||||||
|
<div class="my-hidden animate-duration-500 box1">
|
||||||
|
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="my-hidden animate-duration-500 box">
|
<div class="flex flex-col items-center">
|
||||||
<div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
<div>
|
||||||
|
<Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
|
||||||
|
<Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
|
||||||
|
</div>
|
||||||
|
<div class="h-32">
|
||||||
|
<div class="hidden animate-duration-500 box2 overflow-hidden">
|
||||||
|
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -79,13 +129,28 @@ export default {
|
||||||
`,
|
`,
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex flex-col items-center">
|
<div class="card flex items-center justify-center gap-8">
|
||||||
<div>
|
<div class="flex flex-col items-center">
|
||||||
<Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
|
<div>
|
||||||
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
|
<Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
|
||||||
|
<Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
|
||||||
|
</div>
|
||||||
|
<div class="h-32">
|
||||||
|
<div class="my-hidden animate-duration-500 box1">
|
||||||
|
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="my-hidden animate-duration-500 box">
|
<div class="flex flex-col items-center">
|
||||||
<div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
<div>
|
||||||
|
<Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
|
||||||
|
<Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
|
||||||
|
</div>
|
||||||
|
<div class="h-32">
|
||||||
|
<div class="hidden animate-duration-500 box2 overflow-hidden">
|
||||||
|
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue