CSS Animations

This commit is contained in:
Surya Paolo
2022-11-18 18:54:30 +01:00
parent 495abc33be
commit a56ee80fbb
30 changed files with 1131 additions and 251 deletions

View File

@@ -10,7 +10,7 @@
<div>
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
@click="clickOnElem"
>
{{ myel.container }}
@@ -27,7 +27,7 @@
<div v-for="(rec, ind) in myel.listcards" :key="ind" >
<q-card :class="`my-card center_img bordered ` + myel.class3"
:style="rec.style">
<q-img :src="getImgFileByElem(myel, rec)" />
<q-img :class="myel.class_anim" :src="tools.getImgFileByElem(myel, rec)" />
<q-card-section>
<div :class="` ` + rec.size" :style="`color: ` + rec.color">
{{ rec.alt }}
@@ -61,7 +61,7 @@
<!--<q-slide-transition>
<div v-show="expanded">
<q-separator />
<q-card-section class="text-subitle2">
<q-card-section class="text-subtitle2">
</q-card-section>
</div>
@@ -84,7 +84,7 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()+ ` `+ myel.class_anim"
@click="clickOnElem"
>
<CTitle
@@ -100,22 +100,51 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
@click="clickOnElem"
>
<CImgTitle
v-if="myel.container"
:src="myel.container"
:title="myel.title"
v-if="myel.image"
:src="tools.getImgFileByElem(myel, rec)"
:title="myel.container"
:legendinside="myel.container2"
>
</CImgTitle>
</div>
</div>
</div> <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<CImgPoster
v-if="myel.image"
:src="tools.getImgFileByElem(myel, rec)"
:title="myel.container"
:myheight="myel.heightimg"
:colorTitle="myel.color"
:classTitle="myel.class4"
:vertalign="myel.vertalign"
:speed="myel.speed"
:classSubtitle="myel.class3"
:colorSubtitle="myel.colorsub"
:legendinside="myel.container2"
:logo="tools.getImgFileByFilename(myel, myel.container3)"
:logoheight="myel.height"
:logowidth="myel.width"
:fit="myel.fit"
:class_anim="myel.class_anim"
:class_anim2="myel.class_anim2"
>
</CImgPoster>
</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
@click="clickOnElem"
v-html="myel.containerHtml"
></div>
@@ -124,11 +153,11 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
<div class="text-center">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
@click="clickOnElem"
>
<q-img
:src="getImgFileByElem(myel.container)"
:src="tools.getImgFileByElem(myel.image)"
:fit="myel.fit"
class="img"
:width="myel.widthimg ? myel.widthimg : undefined"
@@ -141,11 +170,11 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
<div class="text-center">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
@click="clickOnElem"
>
<q-img
:src="getImgFileByElem(myel)"
:src="tools.getImgFileByElem(myel)"
:fit="myel.fit"
class="img"
:width="myel.widthimg ? myel.widthimg : undefined"