Transitions

v-enter-from: Starting state for enter. Added before the element is inserted, removed one frame after the element is inserted.

v-enter-active: Active state for enter. Applied during the entire entering phase. Added before the element is inserted, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.

v-enter-to: Ending state for enter. Added one frame after the element is inserted (at the same time v-enter-from is removed), removed when the transition/animation finishes.

v-leave-from: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.

v-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when a leaving transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.

v-leave-to: Ending state for leave. Added one frame after a leaving transition is triggered (at the same time v-leave-from is removed), removed when the transition/animation finishes.

<Transition
  tag="div"
  enter-from-class=""
  enter-active-class=""
  leave-active-class=""
  leave-to-class=""
>

</Transition>

Snippet

    "Transition": {
        "prefix": "ntran",
        "body": [
            "<Transition",
            "  tag=\"div\"",
            "  enter-from-class=\"\"",
            "  enter-active-class=\"\"",
            "  leave-active-class=\"\"",
            "  leave-to-class=\"\"",
            ">",
            "\t${1:content}",
            "</Transition>"
        ],
        "description": "New Blank Vue Transition"
    }