umi中同时使用antd-mobile v2和v5
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了umi中同时使用antd-mobile v2和v5相关的知识，希望对你有一定的参考价值。
参考技术A 历史原因，最开始项目里使用的是 antd-mobile:2.x ，由于实在是太难用，我想要同时使用 v5 版本，参考官网的迁移指南，我们可以使用第一种方法： 官网参考但是使用了之后发现 antd-mobile-v2 的样式没有被正确引用，通过查看 umi 的插件 plugin-antd 发现，在引用 antd 的时候配置了 babel ，引入了样式。所以我猜测是因为包名变成了 antd-mobile-v2 导致无法正确引入，所以我模仿这个插件重新修改了 babel 配置
在Vue中同时使用过渡和动画
在Vue中同时使用过渡和动画
1.在需要设置过渡动画的元素外包裹<transition>标签，然后再设置对应的样式即可（v-enter,v-enter-active,v-leave-to,v-leave-active）
2.如果不想用默认的类，可以自定义类如，enter-active-class="active",然后写.class的样式即可。
3.使用animate.css,只要在需要动画的标签外的transition标签里添加对应属性，比如enter-active-class="animate swing",leave-active-class="animate shake"即可，但前提要引入animate.css
4.若想一加载就有动画效果需要加入appear属性和自定义class:appear-active-class="自定义类名"
5.同时存在过渡动画和其他动画，但时长不一样时，可以设置type属性来决定以谁为准，如：type="transition",则以过渡动画为准。
6.当要自定义时长时，可以这样， ：duration="3000",以毫秒计，这样则是自己定义的时长为准，更复杂的可以设置入场和出场动画， ：
duration="{enter:5000,leave:10000}"
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue的CSS动画原理</title> <script src="./vue.js"></script> <link rel="stylesheet" type="text/css" href="./Animate.css"> <style> .fade-enter,.fade-leave-to{ opacity:0; } .fade-enter-active,.fade-leave-active{ transition:opacity 3s; } </style> </head> <body> <div id="root"> <transition :duration="{enter:5000,leave:10000}" name="fade" appear enter-active-class="animate swing fade-enter-active" leave-active-class="animate shake fade-leave-active" appear-active-class="animated swing" > <div v-show="show">hello world</div> </transition> <button @click="handleClick">切换</button> </div> <script> var vm=new Vue({ el:‘#root‘, data:{ show:true }, methods:{ handleClick:function(){ this.show=!this.show } } }) </script> </body> </html>
以上是关于umi中同时使用antd-mobile v2和v5的主要内容，如果未能解决你的问题，请参考以下文章
umi+antd-mobile开发移动端，使用KeepAlive页面缓存功能（umi-plugin-keep-alive）