Example of custom animation in toasts

Hello, I was wondering if you were so kind as to share some example of custom animation for the Toast component, for example, I have been reading the documentation and I have not found anything regarding the subject, I know I can do it using the component <b-toaster> but I have not managed to meet my expectations. For example, in my case, I am trying to make the notification appear with a translation from right to left and disappear with the opposite movement.

Could someone help me by showing me an example of how to achieve a custom animation? Thank you very much in advance.

[leo95works]

Ok, I have continued my attempts and have managed to avoid using @keyframes for animation in this way, but I still cannot achieve the final animation when the toast is hidden, thus achieving the translation animation from right to left, but I can’t make the final from left to right. Any suggestion?

.b-toaster {
  &.b-toaster-top-right,
  &.b-toaster-top-left,
  &.b-toaster-bottom-right,
  &.b-toaster-bottom-left {
    .b-toast {
      transition: transform .175s;

      &.b-toaster-enter-active,
      &.b-toaster-leave-active,
      &.b-toaster-move {
        transition: none;
      }

      &.b-toaster-enter {
        transform: translateX(100%);
      }

      &.b-toaster-enter-to,
      &.b-toaster-enter-active {
        .toast.fade {
          transition-delay: 0.175s;
        }
      }

      &.b-toaster-enter-to {
      }

      &.b-toaster-leave-active {
        position: absolute;
        transition-delay: 0.175s;

        .toast.fade {
          transition-delay: 0s;
        }
      }

      &.b-toaster-leave-to {
      }
    }
  }
}

[leo95works]

@tmorehouse Thank you very much for your interest in my question. The truth is that I had not responded before because I like to try all possible alternatives and ways before giving a comment. I have tried in various ways to meet my expectations regarding this question. But the truth is that I have not succeeded. Please, if you could analyze what I am doing and see what I have wrong:

@keyframes right {
  from {
    transform: translateX(0%);
  }

  to {
    visibility: hidden;
    transform: translateX(100%);
  }
}

@keyframes left {
  from {
    transform: translateX(100%);
  }

  to {
    visibility: hidden;
    transform: translateX(0%);
  }
}

.b-toaster {
  &.b-toaster-top-right {
    .b-toast {
      &.b-toaster-enter-active,
      &.b-toaster-leave-active,
      &.b-toaster-move {
        animation: left 2s;
      }

      &.b-toaster-enter {
      }

      &.b-toaster-enter-to,
      &.b-toaster-enter-active {
        .toast {
          &.fade {
            transition-delay: .175s;
          }
        }
      }

      &.b-toaster-enter-to {
      }

      &.b-toaster-leave-active {
        position: absolute;
        transition-delay: .175s;

        .toast.fade {
          transition-delay: 0s;
        }
      }

      &.b-toaster-leave-to {
      }
    }
  }
}

In essence what I want to get as a comment in my initial question, is that the toast appears with an animation of translation from right to left, and is hidden with an opposite movement (from left to right). With this, what I have achieved is the following:

In this way I have achieved part of what I want, but I cannot make the opposite movement run when I close the toast. In fact, I don’t know if this way is convenient to achieve what I want, since I may not have to use @keyframes for the animation.

Please, if you could help me with this problem, I would appreciate it. Thank you very much in advance.