basic transitions in call session

This commit is contained in:
Sagi Dayan 2020-05-03 18:38:33 -04:00
parent e864966a2d
commit e4daaac0b1
7 changed files with 59 additions and 7 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -6978,3 +6978,22 @@ video {
.fade-enter, .fade-leave-to {
opacity: 0; }
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
transition-duration: 0.2s;
transition-property: height, opacity, transform;
transition-timing-function: ease-in-out;
overflow: hidden; }
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
transform: translate(2em, 0); }
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
transform: translate(-2em, 0); }

View file

@ -285,3 +285,25 @@ video{
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
transition-duration: 0.2s;
transition-property: height, opacity, transform;
transition-timing-function: ease-in-out;
overflow: hidden;
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
transform: translate(2em, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
transform: translate(-2em, 0);
}

View file

@ -5,7 +5,9 @@
</div>
<div v-else class>
<VideoStrip :localStream="localStream" :remoteStream="remoteStream" />
<transition :name="stateTransitionName">
<router-view></router-view>
</transition>
</div>
</div>
</template>
@ -86,12 +88,21 @@ export default {
computed: {
...mapGetters(["user", "inCall"])
},
watch: {
$route(to, from) {
const toDepth = to.path.split("/").length;
const fromDepth = from.path.split("/").length;
this.stateTransitionName =
toDepth < fromDepth ? "slide-right" : "slide-left";
}
},
data() {
return {
loading: true,
localStream: null,
remoteStream: null,
callManager: null as CallManager
callManager: null as CallManager,
stateTransitionName: "slide-left"
};
},
beforeCreate: () => {}