station-manager-2.0/src/components/ChangesModal.vue

<template>
  <div class="changes-modal">
    <transition name="modal-anim">
      <div class="content g-card" v-if="store.changesResponse.length > 0">
        <h2>Wprowadzone zmiany</h2>
        <div>
          <ul class="changelog">
            <li v-for="change in store.changesResponse">{{ change }}</li>
          </ul>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from '../store';

export default defineComponent({
  setup() {
    return {
      store: useStore(),
    };
  },
});
</script>

<style lang="scss" scoped>
.content {
  top: 0;
  transform: translateX(-50%);

  max-width: 450px;
}

ul.changelog {
  list-style: square;
}

// Vue transition animations
.modal-anim {
  &-leave-active,
  &-enter-active {
    transition: all 100ms ease-in-out;
  }

  &-enter-from,
  &-leave-to {
    transform: translate(-50%, -30px);
    opacity: 0.25;
  }
}
</style>