Vue 2.x Transitions not working with Html Tag Id CSS

Question

Just curious if this is expected behavior with vue, or maybe there is some underlying CSS logic I'm not seeing?

• The following Vue transition works when the default 'right' property is set with a class selector

.theBoxClass { right: 100px;}

but not when set using a css ID selector

#theBoxId { right: 100px;}

CodePen https://codepen.io/PhilipNameHere/pen/xxwBWxw

Code

<div id="background"></div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="vue">
  <transition name="slide">
    <div id="theBoxId" class="box" v-if="show">ID</div>
  </transition>

  <transition name="slide">
    <div class="theBoxClass box" v-if="show">Class</div>
  </transition>
  <button v-on:click="onShowClick">CLICK ME TWICE</button>
</div>


body {
  margin: 0;
  padding:20px;  
}

button
{
  background:red;
  padding:30px;
  color:white;
  font-weight:bold;
}

.box{
   background:gray;
  width:100px;  
  position:fixed;  
  height:100px;
  text-align:center;
  color:white;
  font-size:20px;
  line-height:100px;  
}
.theBoxClass
{
  top:20px;
  right:100px;
}

#theBoxId
{
   top:220px;
   right:100px;
}


    .slide-enter-active , 
    .slide-leave-active {
      transition: right 1s ease-out;    
    }

    .slide-enter,
    .slide-leave-to  { 
       right:-100px;
    }



new Vue({
  el: "#vue",
  data: {  
    show: false
  },
  methods: {
    onShowClick: function() {
      this.show = !this.show;
    }
  }
});

Answer 1

Changing

.slide-enter,
.slide-leave-to  { 
   right:-100px;
}

To

.slide-enter,
.slide-leave-to  { 
   right:-100px !important;
}

Makes it work with the ID because ID selectors have greater specificity than class selectors:

The following list of selector types increases by specificity:

• Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).

• Class selectors, attributes selectors and pseudo-classes.

• ID selectors (e.g., #example).