basic transitions in call session

public/style.css

@@ -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); }

resources/sass/main.scss

@@ -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);
+}

resources/scripts/applications/home/views/call.vue

@@ -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: () => {}