bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better doleance transition #2233

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2024-01-09 22:27:39 +01:00
parent 510ca72d0a
commit 89889df66c
3 changed files with 102 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/assets/main.scss
View File

@@ -662,25 +662,80 @@ body{
}
nav.doleance-switch{
position: fixed;
pointer-events: none;
overflow: hidden;
top: 0; left: 0;
width: calc(100vw - $cartouch_width - 0.5rem);
height: 100vh;
div{
pointer-events: all;
$height:60vh;
position: fixed;
position: absolute;
top: calc((100vh - $height) * 0.51);
cursor: pointer;
width:150px;
width:605px;
height: $height;
background-image: url(../assets/cercle_politique.png);
background-size: cover;
&:hover{
visibility: hidden;
&.visible{
visibility: visible;
}
&:hover:not(.animeleft):not(.animeright){
background-image: url(../assets/cercle_politique-hover.png);
}
&.prev{
left: 0rem;
left: calc(-605px + 150px);
background-position: right;
}
&.next{
right:calc($cartouch_width + 0.5rem);
right:calc(-605px + 150px);
}
transition: opacity 1s ease-in-out;
transform: translateX(0);
&.animeleft,
&.animeright{
// animation-duration: 1.5s;
transition: opacity 1s ease-in-out,transform 1s ease-in-out;
opacity: 0;
}
&.animeleft{
// animation-name: animeleft;
transform: translateX(calc(-100vw / 2));
}
&.animeright{
// animation-name: animeright;
transform: translateX(calc(100vw / 2));
}
// @keyframes animeleft {
// from {
// transform: translateX(0);
// opacity: 1;
// }
// to {
// transform: translateX(calc(-100vw / 2));
// opacity: 0;
// }
// }
// @keyframes animeright {
// from {
// transform: translateX(0);
// opacity: 1;
// }
// to {
// transform: translateX(calc(100vw / 2));
// opacity: 0;
// }
// }
}
}

23
src/components/ConcernementMapItem.vue
View File

@@ -548,6 +548,7 @@ export default {
*/
setPaperContents(){
// trigered once opening tween is complete
// trigered once mapmode changed
this.clearPaperContents();
switch(this.map_mode){
case 'terraindevie':
@@ -1616,8 +1617,7 @@ export default {
},
initDoleanceTransition(from, to){
if (!this.doleance_transition) {
this.doleance_transition = true
let u = 0;
this.doleance_transition = true
// console.log(`initDoleanceTransition from:${from}, to:${to}`);
let from_pg = this.paper_main_object.children.doleances.children[`doleance_${from}`]
from_pg.visible = true;
@@ -1625,15 +1625,24 @@ export default {
let to_pg = this.paper_main_object.children.doleances.children[`doleance_${to}`]
to_pg.visible = true;
to_pg.opacity = 0;
let bg = this.paper_main_object.children.doleance_bg;
// fade out the current visible cercle politique then fade in the new one
let u = 0;
let f = 6;
let p = 10;
let doDoleanceTransition = function(){
// console.log(`doDoleanceTransition u:${u} from:${from_pg}, to:${to_pg}`);
u++
if (u <= 20) {
if (u<=10) {
from_pg.opacity = 1-u/10
if (u <= f*2+p) {
if (u<=f) {
// fade out
from_pg.opacity = bg.opacity = 1-u/f
} else if(u>f && u<p+f) {
// pause
}else{
to_pg.opacity = (u-10)/10
// fade in
to_pg.opacity = bg.opacity = (u-p-f)/f
}
window.requestAnimationFrame(doDoleanceTransition);
}else{

47
src/components/contents/Doleancer.vue
View File

@@ -46,20 +46,41 @@ export default {
}
});
},
mounted() {
if (this.doleance_index > 0)
this.$refs.prevDoleanceBTN.classList.add('visible');
if (this.doleance_index < this.concernement.doleances.length-1)
this.$refs.nextDoleanceBTN.classList.add('visible');
},
methods: {
...mapActions(ConcernementsStore,['setOpenedDoleance']),
nextDoleance(){
this.doleance_index ++;
this.openDoleance()
this.$refs.prevDoleanceBTN.classList.add('animeleft');
this.$refs.nextDoleanceBTN.classList.add('animeleft');
this.openDoleance();
},
prevDoleance(){
this.doleance_index --;
this.$refs.prevDoleanceBTN.classList.add('animeright');
this.$refs.nextDoleanceBTN.classList.add('animeright');
this.openDoleance()
},
openDoleance(){
console.log('openDoleance');
this.doleance = this.concernement.doleances[this.doleance_index];
this.setOpenedDoleance(parseInt(this.cid), this.doleance.id);
setTimeout((function(that){
return function(){
console.log('doleance anime end', that);
that.$refs.prevDoleanceBTN.classList.remove('animeleft', 'animeright');
that.$refs.prevDoleanceBTN.classList.toggle('visible', that.doleance_index > 0);
that.$refs.nextDoleanceBTN.classList.remove('animeleft', 'animeright');
that.$refs.nextDoleanceBTN.classList.toggle('visible', that.doleance_index < that.concernement.doleances.length-1);
};
}(this)), 1000)
}
},
components: {
@@ -293,29 +314,13 @@ export default {
<nav v-if="map_mode === 'doleancer'" class="doleance-switch">
<div
v-if="doleance_index > 0"
@click="prevDoleance"
class="prev">
<!-- <svg class="prev-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
<mask id="arrowMaskprev">
<rect x="0" y="0" width="24" height="24" fill="white"/>
<path :d="arrowleft_path" fill="black"/>
</mask>
<circle cx="12" cy="12" r="12" mask="url(#arrowMaskprev)" fill="white" />
</svg> -->
</div>
class="prev"
ref="prevDoleanceBTN" />
<div
v-if="doleance_index < concernement.doleances.length-1"
@click="nextDoleance"
class="next">
<!-- <svg class="next-doleance-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
<mask id="arrowMasknext">
<rect x="0" y="0" width="24" height="24" fill="white"/>
<path :d="arrowright_path" fill="black"/>
</mask>
<circle cx="12" cy="12" r="12" mask="url(#arrowMasknext)" fill="white" />
</svg> -->
</div>
class="next"
ref="nextDoleanceBTN" />
</nav>
</template>