vue tab切换显示效果,基于Transition组件和animate.css实现动画切换效果

vue 使用transition 组件的过渡效果 出现(渲染)和退出(摧毁)和animate动画实现切换效果

Transition 组件

<Transition> 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。

具体可以参考vue transition组件官方组件说明
https://cn.vuejs.org/guide/built-ins/transition.html
vue transition 组件 api官方说明
https://cn.vuejs.org/api/built-in-components.html#transition

官方给出的案例如下: 为过渡效果命名
我们可以给 <Transition> 组件传一个 name prop 来声明一个过渡效果名：

<Transition name="fade">
  ...
</Transition>

对于一个有名字的过渡效果，对它起作用的过渡 class 会以其名字而不是 v 作为前缀。比如，上方例子中被应用的 class 将会是 fade-enter-active 而不是 v-enter-active。这个“fade”过渡的 class 应该是这样：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

下面为全部代码

// 样式说明：
enter-active 元素渲染时
leave-active 元素销毁时

<script>
export default{
  data(){
    return{
				tab: true
    }
  }
}
</script>

<template>
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
  <div>
	<button @click="tab=true" :style='tab?"color:red":"color:blue"'>账号登录</button>
	<button @click="tab=false" :style='!tab?"color:red":"color:blue"'>二维码登录</button>
    <transition appear name="move" v-if="tab">
			<p  class="box">账号密码</p>
    </transition>
	  <transition appear name="move1" v-else>
			<p class="box1">二维码展示</p>
    </transition>
  </div>
</template>

<style scoped>
 .move-enter-active {
  animation: slideInLeft  0.5s;
}
 .move-leave-active {
  animation: slideOutLeft  0.1s;
}
 .move1-enter-active {
  animation: slideInRight  0.5s;
}
 .move1-leave-active {
  animation: slideOutRight  0.1s;
}
.box {
  text-align: center;
  height: 50px;
  line-height: 50px;
  background: pink;
  color: #fff;
}
  .box1{
    text-align: center;
    height: 50px;
    line-height: 50px;
    background: blue;
    color: #fff;
  }

</style>