Vue transition - transform translate not working

Question

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

A. L · Accepted Answer · 2018-03-13 23:54:05Z

3

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;

answered Mar 13, 2018 at 23:54

A. L

12.7k29 gold badges100 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue transition - transform translate not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related