What should I do if there is no animation effect when the uniapp keyboard shrinks?

With the popularity of mobile devices and the growth of the mobile application market, developers are increasingly learning to use cross-platform frameworks to develop applications. Uniapp is a popular cross-platform development framework. Uniapp is developed based on Vue.js and provides a series of plug-ins and components to facilitate developers to develop and debug.

However, when developing Uniapp applications, some developers discovered a problem: after the input box gets focus and the keyboard pops up, there is no animation effect when the keyboard shrinks, especially on Android devices. This problem may affect the user experience. Here are several solutions.

1. Use the transition officially provided by vue-router

vue-router is a routing management tool officially provided by Vue.js, which provides transition to achieve routing transition effects. In Uniapp, we can use the transition in vue-router to achieve the animation effect when the keyboard shrinks.

The specific implementation method is as follows:

1. Add the following code in 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>

2. Where the animation effect needs to be achieved, For example, in a pop-up layer, add the following code in the style tag of the component:

.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;
}

In the above code,

• fade-enter-active: Indicates the animation effect when entering
• fade-leave-active: Indicates the animation effect when leaving
• fade-enter: When entering Initial state
• fade-leave-to: Final state when leaving

The advantage of this method is that it is simple to use and can customize the animation effect. However, it is necessary to write transition code multiple times to make the page animation take effect, which may cause code redundancy.

2. Call the system API

We can use the API provided by uni-app to call the listening event of the system keyboard to achieve the animation effect when the keyboard pops up and shrinks.

The implementation method is as follows:

1. On pages that need to achieve animation effects, you can add the following code in the onLoad or onShow life cycle:

onLoad() {
  uni.onKeyboardHeightChange((res) => {
    if(res.height > 0){
      //键盘弹出时
      this.isShowKey = true;
      this.keyHeight = res.height;
    } else {
      //键盘收回时
      this.isShowKey = false;
    }
  });
},

Above In the code, the uni.onKeyboardHeightChange method can monitor when the keyboard height changes and trigger the callback function. If the height of the keyboard is greater than 0, it is judged that the keyboard pops up, and a style is added to the corresponding DOM element for animation; if the height of the keyboard is 0, it is judged that the keyboard is retracted, and the animation effect of the DOM element is cancelled.

2. Add the following code in the style tag of the corresponding DOM element:

<input class="input" type="text" 
style="transform: translate3d(0, {{isShowKey ? -(keyHeight - 68)+&#39;px&#39; : &#39;0&#39;}}, 0);"
/>

In the above code,

• transform: translate3d(): Indicates changing the position of the element
• isShowKey: Indicates whether the keyboard pops up, if true, it means it pops up
• keyHeight-68 'px ': Indicates the height of the keyboard minus the height of the operation bar at the bottom of the screen, and then translates upward on the original basis
• 0: Indicates the position of the element in its initial state

The advantage of this method is that it is simple to use and does not require the use of third-party plug-ins, but the animation effect when the keyboard is retracted may not be smooth enough.

3. Use third-party plug-ins

We can also use some third-party plug-ins to achieve animation effects, such as the uni-transition component in uview-ui, etc.

The implementation method is as follows:

1. Download and reference the uview-ui framework.
2. In the page where animation effects need to be achieved, add the following code:

<uni-transition :name="&#39;fade&#39;">
  <div v-show="showContent" class="content">
    //...
  </div>
</uni-transition>

In the above code, the uni-transition component can wrap the page where animation effects need to be added. Component, specify the animation type through the :name attribute. The v-show directive means to display the component when needed.

3. Add the following code in the style tag:

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

In the above code:

• fade-enter-active: Indicates the animation effect when entering
• fade-leave-active: Indicates the animation effect when leaving
• fade-enter: When entering Initial state
• fade-leave-to: Final state when leaving

The advantage of this method is that it is simple to use and can customize the animation effect. However, third-party plug-ins need to be introduced, which may increase the size of the project.

To sum up, the above are three methods to solve the problem of no animation effect when the Uniapp keyboard shrinks. Developers can choose the appropriate method according to their own project needs. Whether you use vue-router's transition, call system API to achieve animation effects, or use third-party plug-ins, the key is to formulate solutions based on specific situations to improve user experience and improve application quality.

The above is the detailed content of What should I do if there is no animation effect when the uniapp keyboard shrinks?. For more information, please follow other related articles on the PHP Chinese website!