div shows and hides (v-if) animation transition--transition

A reminder box is displayed in the upper left corner and lower right corner. It will disappear automatically or manually after fifteen seconds.

Put a layer on the outside of the label that will be hidden through v-iftransition label, and name the label name attribute.

    <transition name="move">
      <Schedule ></Schedule>
    </transition>

 Perform various actions in css

 // 开始进入
.move-enter {
   margin-top: 5rem;
  opacity: 0;
}
// 进入中的过程
.move-enter-active {
  transition: all 2s;
}
// 进入完毕
.move-enter-to {
   margin-top: 0px;
  opacity: 1;
}
// 准备离开
.move-leave {
  margin-top: 0px;
  opacity: 1;
}
// 离开的过程
.move-leave-active {
  transition: all 1s;
}
// 离开完毕
.move-leave-to {
   margin-top: 5rem;
  opacity: 0;
}

Various positioning in the upper right corner or lower right corner

 position: fixed;

  top: 10%;

  right: 52px;

  background-color: #ffffff;