web技术学习

切换模式

本文总阅读量 次

Vue transition 动画过渡 ​

class类 ​

  • 显示 name 为自定义组件上 name
    • name-enter：进入前
    • name-enter-active：进入中
    • name-enter：进入后
  • 消失
    • name-leave：消失前
    • name-leave-active：消失中
    • name-leave-to：消失后
vue
.name-enter,.name-leave-to{
  width: 0;
}
.name-enter-active,.name-leave-active{
  transition: all .3s;
}
.name-enter-to,.name-leave{
  width: 100px;
}
</style>

</head>
<body>
<div id="box">
  <button @click='tog'>click</button>
  <transition name='name'>
        <div v-show='fg'></div>
  </transition>
</div>

组件属性 attr-class ​

  • enter-class：进入前
  • enter-active-class：进入中
  • enter-to-class：进入后
  • leave-class：离开前
  • leave-active-class：离开中
  • leave-to-class：离开后

4.1.1 以上 animate.css，需要加 animate__animated 与 animate__ 动画名

html
<transition
  enter-active-class="animate__animated animate__bounce"
  leave-active-class="animate__animated animate__bounceOutRight">
\> 
    <div v-show='fg' class="animated"></div>
</transition>

多个元素过渡 ​

html
<transition enter-active-class="animate__animated animate__fadeInRight" 
leave-active-class="animate__animated animate__fadeOutUpBig">
    <div v-if='isshow' key="1"></div>
    <div v-else key="2"></div>
</transition>

列表过渡 ​

tag 把外层包装为 ul 标签，默认是 span

html
<transition-group tag="ul" 
  enter-active-class="animate__animated animate__fadeInRight" 
  leave-active-class="animate__animated animate__fadeOutUpBig"
\> 
  <li v-for="(item,index) in items" :key="item.id" @click='del(index)'>
​    {{ item }}
  </li>
</transition-group>

过渡模式 ​

  • 在 transtion 上添加属性 mode
  • in-out: 新元素先进行过渡，完成之后当前元素过渡离开。(一般不用)
  • out-in: 当前元素先进行过渡，完成之后新元素过渡进入。

评论