vue4-过渡动画 组件

1.vue中的过渡和动画

参考 https://cn.vuejs.org/v2/guide/transitions.html#CSS-过渡
其他第三方 CSS 动画库：Animate.css 。。。。

1.css过渡

1.1类名

1.2样式定义：

1.3使用方法

<transition name="ballTrans" >
<!-- v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" -->
<div class="ball" v-if="show" ></div>
</transition>




.ballTrans-enter{
    opacity:0;
    transform: translate(100px,100px);
}
.ballTrans-leave-to{
    opacity:0;
    transform: translate(100px,100px);
}
.ballTrans-enter-active{
    transition: cubic-bezier(1.0, 0.5, 0.8, 1.0) 1s  All;
    -webkit-transition:cubic-bezier(1.0, 0.5, 0.8, 1.0) 1s  All;
    -moz-transition: cubic-bezier(1.0, 0.5, 0.8, 1.0) 1s  All;
}
.ballTrans-leave-active{
    transition: ease 2s  All;
    -webkit-transition:ease 2s  All;
    /* -moz-transition:ease 6s  All; */
}

2.css 动画 @keyframes

.bounce-enter-active {
  animation: 名称  5s;
}
.bounce-leave-active {
  animati