Как добавить анимацию выезжающего блока со стороны?

Question

[NDll]

Всем привет. Как сделать, чтобы блок attributes выезжал справа при активации модального окна?

На странице есть модалка

<Teleport to="#root">
    <MAttributes v-if="isSide" />
</Teleport>

Компонент MAttributes:

<template>
  <MSide class="sideAttributes">
    <div class="attributes">
      Этот блок должен выезжать
    </div>
  </MSide>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useAttributeStore } from "@/store/attribute";
import { useModalStore } from "@/store/modal";

import MSide from "@/components/modals/MSide.vue";

export default defineComponent({
  components: {
    MSide,
  }
  ,
  setup() {

    const attrStore = useAttributeStore()
    const storeModal = useModalStore()

    const changeAttribute = (data: any) => {
      try {
        attrStore.putSelected(data)
        storeModal.closeActiveModal()
      } catch (e: any) {
      }
    }

    return {
      changeAttribute
    }
  },
})
</script>

<style lang="scss">

</style>

И обертка для модалки MSide:

<template>
  <div class="side">
    <div class="sideContainer">
      <slot />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import IconClose from "@/assets/icons/close.svg?component";
import { useModalStore } from "@/store/modal";

export default defineComponent({
  components: {
    IconClose
  },
  props: {
    classname: {
      type: String,
      default: ''
    },
    center: {
      type: Boolean,
      default: true,
    },
    name: {
      type: String,
      default: ''
    }
  },
  setup() {

    const storeModal = useModalStore()

    const closeModal = () => {
      storeModal.closeActiveModal()
    }

    return {
      closeModal
    }
  },
})
</script>

<style lang="scss">
.side {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
  background-color: rgba(0, 0, 0, 0.4);
  transform: translateZ(0);
  overflow: hidden;

  &Container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3001;
    display: block;
    width: calc(100% - 300px);
    background: #ffffff;
    transform: translateX(0);
  }

  &Close {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
    transition: 0.4s;
    z-index: 5;

    &:hover {
      transform: rotate(90deg);
    }
  }
}
</style>