Vue transition - transform translate not working

0
votes

So I have the following code:

HTML:

<transition name="slide-left-centered">
  <div v-if="test" style="position: fixed; transform: translate(0, 100%)">
    test code
  </div>
</transition>

CSS:

.slide-left-centered-enter,
.slide-left-centered-leave-to {
    transform: translateX(-100%);
    opacity: 0;
}

.slide-left-centered-enter-active {
    transition: all .3s ease;
}

.slide-left-centered-leave-active {
    transition: all .5s ease;
}

If I were to toggle it on and off, it only fades with the opacity but does not move. This works once I remove transform from the HTML.

https://codesandbox.io/s/92mv6ov6xy

1
vue.jstransition

1 Answers

1
votes

I have figured out the problem

This won't work as inline styling takes precedent.

In my real problem, it is using a class which is a child of another class. The reason why it didn't work was because of specificity. I have added !important to the transition class and now it works e.g.

transform: translateX(-100%) !important;