Vue过渡动画 transition结合animate.css使用

小鱼儿 2022-03-11 08:16 313阅读 0赞

### 第一步.引用 animate.css文件 ###

### 第二步.定义动画名字，如下图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70][]

<transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
            <p v-show="show" class="animated"></p>
    </transition>
    或者
    <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
            <p v-show="show"></p>
    </transition>

动画运动的时间：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70]: /images/20220311/8dfae2d7fb12420e9cbf1c7b386097c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 1]: /images/20220311/a8fa7eaee6a44b928c60c0faa8102f68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70 2]: /images/20220311/ac525878d7a84d518f25063b920b2b31.png

发表评论取消回复

表情：

评论列表（有 0 条评论，313人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue的过渡&动画效果-transition

![20210727104234223.gif][] / 可以设置不同的进入和离开动画 / / 设置持续时间和动画函数 / .fade-

我不是女神ヾ/ 2022年09月01日 08:12/ 0 赞/ 248 阅读

相关 Android Transition（Android过渡动画）

> 参考链接: > \- [http://www.jianshu.com/p/0af52be90ae6][http_www.jianshu.com_p_0af52be90a

向右看齐/ 2022年06月03日 06:27/ 0 赞/ 314 阅读

相关 vue中过渡和动画结合

动画、过渡、页面加载时就有动画 <style> .de{ width: 100px; height: 100p

深碍√TFBOYSˉ_/ 2022年04月15日 02:59/ 0 赞/ 225 阅读

相关 vue过渡动画transition、关键帧（keyframes）动画的实现

> 要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），或者控制元素的显示隐藏，也可改变元素的状态，

拼搏现实的明天。/ 2022年04月04日 13:39/ 0 赞/ 903 阅读

相关 Vue过渡动画 transition结合animate.css使用

第一步.引用 animate.css文件第二步.定义动画名字，如下图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

小鱼儿/ 2022年03月11日 08:16/ 0 赞/ 314 阅读

相关 Vue中使用 transition动画，vue过渡动画

[Vue][]的动画并没有非常炫酷的效果，不过也是有一些实用性的，在项目中有的地方使用，也是能够营造出不同的效果下面为大家列举两个简单实现动画的例子，动画其实很简单，就是利

小鱼儿/ 2022年03月11日 08:08/ 0 赞/ 901 阅读

相关 vue-router—9导航切换过渡动画transition使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9q

蔚落/ 2022年01月15日 04:23/ 0 赞/ 216 阅读

相关 vue----transition动画

动画原理 1、如果想要给哪个元素添加动画那么必须给当前元素添加一个标签transitionn，name为动画的名称 <transition name=“”

向右看齐/ 2021年12月23日 10:13/ 0 赞/ 376 阅读

相关 vue学习（8）-过渡transition&动画animate

进入之前离开之后 v-enter\---v-enter-to

超、凢脫俗/ 2021年11月02日 02:06/ 0 赞/ 435 阅读

相关 Vue - Vue中使用 transition 过渡动画、Animate.css 库动画

Vue 中使用过渡动画一. transition 二. Vue 中使用 @keyframes 1. @keyframes 的使用

﹏ヽ暗。殇╰゛Y/ 2021年07月25日 17:15/ 0 赞/ 829 阅读