WXOPEN Club

求助，关于在手机上预览小程序动画过渡缺失的问题

发布于 8 年前作者 ping519721 次浏览最后编辑 8 年前来自 ask

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

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

5 回复
min87
min871 楼6 年前

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

guiyingchen
guiyingchen2 楼6 年前
var  animation = wx.createAnimation({
             duration: 1000,
             timingFunction:  "ease-in-out" ,
         });

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

junxu
junxu3 楼6 年前

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

qiaoyan
qiaoyan4 楼6 年前

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

jun37
jun375 楼6 年前

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: "시작하자!",
        })
    }
 
     
})