vue2.0使用animate.css动画,transition&transition-group
程序员文章站
2024-03-25 12:51:04
...
<link rel="stylesheet" href="./static/css/animate.min.css">
//transition中有一个v-show/v-if
<transition enter-active-class="animated bounceInRight" leave-active-class="animated bounceInRight">
<div class="qiandao" v-if="isShow"></div>
</transition>
//transition中有多个v-show/v-if 使用transition-group,内元素要加key
<transition-group enter-active-class="animated bounceInRight" leave-active-class="animated bounceInRight">
<i class="icon iconfont icon-bianji" v-if="isShow == item.id" @click="exitAddress(item)"
:key="1"></i>
<i class="icon iconfont icon-shanchu1" v-if="isShow == item.id" @click="deleteAddress(item)"
:key="2"></i>
</transition-group>
推荐阅读
-
vue2.0使用animate.css动画,transition&transition-group
-
常用---vue-cli中使用页面切换库vue-awesome-swiper以及动画库animate.css
-
在Vue.js项目中使用Animate.css类库实现动画
-
animate.css 动画效果的使用
-
动画Animate.css使用
-
css3动画简介以及动画库animate.css的使用_html/css_WEB-ITnose
-
css3动画简介以及动画库animate.css的使用_html/css_WEB-ITnose
-
vue2.0 中使用transition实现动画效果使用心得
-
vue2.0 中使用transition实现动画效果使用心得
-
vue2.0 和 animate.css的结合使用