求助，关于在手机上预览小程序动画过渡缺失的问题
发布于 7 年前 作者 ping51 9603 次浏览 来自 问答

新手刚接触小程序开发，在做一个输入框聚焦后上移的动画时，开发工具内预览正常，但在手机上预览就出现缺少动画过渡的情况，输入框直接从起点调到了终点，请帮忙解决一下

        var animation = wx.createAnimation({
            duration: 1000,
            timingFunction: "ease-in-out",
        });
        this.animation = animation;
        animation.translateY(-170).step();
        this.setData({
            animationData: animation.export()
        })

5 回复

问题解决了？ 我也遇到类似问题

var  animation = wx.createAnimation({
             duration: 1000,
             timingFunction:  "ease-in-out" ,
         });

这一段放到 Page外面，看好点没。没好的话说下，我去看看片段

这边是在iOS手机上有过渡丢失，在安卓机上没没没有问题。模拟器没没没问题。。我只是用一个动画过渡下。。小程序动画兼容还是有问题

你好，方便的话请提供能复现问题的简单代码片段（ https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html ）。

wxml代码:

<view id='search' >
        <input animation="{{animationData}}" placeholder="{{content}}" bindfocus='input_focus' bindblur='input_blur'/>
</view>

js代码:

Page({
    data:{
        animationData:{},
        content: "시작하자!",
    },
    input_focus: function(){
        // clear placeholder
        this.setData({
            content: "",
        });
        // set animation
        var animation = wx.createAnimation({
            duration: 1000,
            timingFunction: "ease-in-out",
        });
        this.animation = animation;
        animation.translateY(-170).step();
        this.setData({
            animationData: animation.export()
        })
    },
    input_blur: function(){
        this.setData({
            content: "시작하자!",
        })
    }
 
     
})
回到顶部