Vue.js transition

See the Pen Vue.js transition by takapen (@takapen) on CodePen.

  
contents






  
contents

/* name属性無し */
.v-enter-active,
.v-leave-active {
  /* 表示されている際のCSS */
  transition: opacity .5s;
}
.v-enter,
.v-leave-to {
  /* 非表示の際のCSS */
  opacity: 0;
}


/* name属性有り */
.name-enter-active,
.name-leave-active {
  /* 表示されている際のCSS */
  transition: opacity .5s;
}
.name-enter,
.name-leave-to {
  /* 非表示の際のCSS */
  opacity: 0;
}

new Vue({
  el:'#app1',
  data:{
    show:false
  }
});
new Vue({
  el:'#app2',
  data:{
    show:false
  }
});