Bonjour,
J'essaie de faire une interface de connection en 3 parties (connexion, inscription, restauration mdp). Chaque partie s'affiche quand on clique sur le lien correspondant.
Jusque là, tout fonctionne. Pour le passage d'une partie à l'autre, j'applique une transition. La transition se fait mais elle se fait en même temps malgrés que j'ai mis "mode="out-in"".
J'aimerais que la transition "Out" se fasse en premier puis, le "In"
Voici mon code:
<template>
<div>
<ul class="login_menu">
<li class="border" @click.prevent="loginForm"><a href="#"><i class="fa fa-sign-in"></i>Connexion</a></li>
<li class="border" @click.prevent="registerForm"><a href="#"><i class="fa fa-user-plus"></i> Inscription</a></li>
<li @click.prevent="restoreForm"><a href="#"><i class="fa fa-key"></i>Mot de pass perdu ?</a></li>
</ul>
<div class="login">
<form class="form">
<transition-group name="fade" mode="out-in" appear>
<div v-show="login" key="login">
Orgias resistere!Never love the body, for you cannot experience it.
</div>
<div v-show="register" key="register">
detrius, byssus, et itineris tramitem.
Ubi est magnum bubo?
</div>
<div v-show="restore" key="restore">
with watermelons drink whiskey.
with mackerels drink beer.
</div>
</transition-group>
</form>
</div>
</div>
</template>
<script>
export default{
data () {
return {
login: true,
register: false,
restore: false
}
},
methods: {
loginForm () {
this.login = true
this.register = false
this.restore = false
},
registerForm () {
this.register = true
this.login = false
this.restore = false
},
restoreForm () {
this.restore = true
this.login = false
this.register = false
}
}
}
</script>
<style>
/* Login */
.login{
border: 2px solid #ffffff;
border-radius: 20px;
margin-top: 30px;
padding: 30px;
height: 500px;
}
/* Menu */
.login_menu{
border: 1px solid #ffffff;
border-radius: 20px;
padding: 20px 0;
}
.login_menu li{
display: inline;
padding: 15px;
font-size: 20px
}
.login_menu li i{
margin-right: 15px;
}
.login_menu li a{
color: #ffffff;
}
.border{
border-right: 1px solid #ffffff;
}
/* formulaire */
.bouton {
display: block;
border: 2px solid white;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 30px;
color: white;
margin: auto;
text-align: center;
}
.cond{
margin-bottom: 20px;
}
.cond label, .cond input{
color: #ffffff;
}
.checkbox:checked + label:before {
top: -4px;
left: -3px;
width: 12px;
height: 22px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid white; /* You need to change the colour here */
border-bottom: 2px solid white; /* And here */
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.fade-enter-active{
transition: opacity 5s;
}
.fade-enter{
opacity: 0;
}
.fade-leave-active{
transition: opacity 5s;
}
.fade-leave-active{
opacity: 0;
}
</style>