随着移动设备的普及，移动应用市场的壮大，开发者们越来越多地开始学习使用跨平台框架来开发应用，其中uniapp是一款备受欢迎的跨平台开发框架。uniapp基于vue.js开发，并提供了一系列插件和组件，方便开发者进行开发和调试。
然而，在开发Uniapp应用时，有些开发者发现了一个问题：在输入框获取焦点并弹出键盘后，键盘收缩时没有动画效果，特别是Android设备上更为明显。这个问题可能会影响用户的使用体验，下面介绍几种解决方法。
一、使用vue-router官方提供的transition
vue-router是Vue.js官方提供的路由管理工具，其提供了transition来实现路由过渡效果。在Uniapp中，我们可以使用vue-router中的transition来实现键盘收缩时的动画效果。
具体实现方法如下：
- 在App.vue中添加以下代码：
<template>
<div id="app">
<transition name="fade">
<router-view/>
</transition>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
methods: {},
}
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>- 在需要实现动画效果的地方，比如一个弹出层中，在该组件的style标签中添加以下代码：
.slide-up-enter-active, .slide-up-leave-active {
transition: all .3s cubic-bezier(.55,0,.1,1);
}
.slide-up-enter, .slide-up-leave-to {
transform: translateY(100%);
opacity: 0;
}以上代码中，
-
fade-enter-active：表示进入时的动画效果 -
fade-leave-active：表示离开时的动画效果 -
fade-enter：进入时的初始状态 -
fade-leave-to：离开时的最终状态
该方法的优点是使用简单，且可以自定义动画效果，但需要多次编写transition代码来使页面动画生效，可能存在代码冗余的问题。
二、调用系统API
我们可以使用uni-app提供的API来调用系统键盘的监听事件，从而实现键盘弹出、收缩时的动画效果。
实现方法如下：
- 在需要实现动画效果的页面，可以在onLoad或onShow生命周期中添加以下代码：
onLoad() {
uni.onKeyboardHeightChange((res) => {
if(res.height > 0){
//键盘弹出时
this.isShowKey = true;
this.keyHeight = res.height;
} else {
//键盘收回时
this.isShowKey = false;
}
});
},以上代码中，uni.onKeyboardHeightChange方法可以在键盘高度发生变化时监听到，并触发回调函数。如果键盘的高度大于0，则判断为键盘弹出，此时给相应的DOM元素添加样式进行动画；如果键盘的高度为0，则判断为键盘收回，此时取消DOM元素的动画效果。
- 在相应的DOM元素的style标签中添加以下代码：
<input class="input" type="text"
style="transform: translate3d(0, {{isShowKey ? -(keyHeight - 68)+'px' : '0'}}, 0);"
/>以上代码中，
-
transform: translate3d()：表示改变元素的位置 -
isShowKey：表示键盘是否弹出，为true则表示弹出 -
keyHeight-68+'px'：表示键盘的高度减去屏幕底部操作栏的高度，再在原基础上向上平移 -
0：表示元素初始状态下的位置
该方法的优点是使用简单，无需引用第三方插件，但键盘收回时的动画效果可能不够流畅。
三、使用第三方插件
我们还可以使用一些第三方插件来达到动画效果的目的，比如uview-ui中的uni-transition组件等。
实现方法如下：
- 下载并引用uview-ui框架。
- 在需要实现动画效果的页面中，添加以下代码：
<uni-transition :name="'fade'">
<div v-show="showContent" class="content">
//...
</div>
</uni-transition>以上代码中，uni-transition组件可包裹需要添加动画效果的组件，通过:name属性来指定动画类型。v-show指令表示在需要时显示组件。
- 在style标签中添加以下代码：
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}以上代码中：
-
fade-enter-active：表示进入时的动画效果 -
fade-leave-active：表示离开时的动画效果 -
fade-enter：进入时的初始状态 -
fade-leave-to：离开时的最终状态
该方法的优点是使用简单，且可以自定义动画效果，但需要引入第三方插件，可能会增加项目的体积。
综上所述，以上是三种解决Uniapp键盘收缩时没有动画效果的方法，开发者可以根据自己的项目需求选择合适的方法。无论是使用vue-router的transition、调用系统API实现动画效果，还是使用第三方插件，关键在于根据具体情况制定解决方案，提高用户体验，提高应用的质量。
