187 Using Custom CSS Class Names

如下代码，可以自定义css中的v，比如改成para，在transition中添加name="para"即可；

如果css来自于外部并且无法修改css名，可以使用enter-to-class/enter-active-class指定css;

<div class="container">
    <transition name="para" enter-to-class="" enter-active-class="">
      <p v-if="paraIsVisible">This is only sometimes visible...</p>
    </transition>
    <button @click="toggleParagraph">Toggle Paragraph</button>
  </div>

.para-enter-from {
  /* opacity: 0;
  transform: translateY(-30px); */
}

.para-enter-active {
  /* transition: all 0.3s ease-out; */
  animation: slide-fade 0.3s ease-out;
}

.para-enter-to {
  /* opacity: 1;
  transition: translateY(0); */
}

.para-leave-from {
  /* opacity: 1; */
}

.para-leave-active {
  animation: slide-fade 0.3s ease-out;
}

.para-leave-to {
  /* opacity: 0;
  transform: translateY(-30px); */
}