收藏
回答

小程序动画为什么不出效果

问题模块
开发者工具

<wxml>


<view id='seek' wx:if="{{isSearch}}" animation="{{animationData}}">

 <view class='seek'>

   <input bindconfirm='searchTap' placeholder='设备名称/设备序列号' confirm-type="search" value='{{searchInput}}' focus placeholder-style='font-size: 28rpx;color: #999999;text-align: center;'></input>

   <view class='cancel' bindtap='cancelTap'>x</view>

   <view class='quit' bindtap='HideSearchTap'>取消</view>

 </view>

 <view class='result' wx:if='{{isHistory}}'>

   <view class='text-result'>搜索历史</view>

   <view class='history'>

     <view class='history-item' wx:for="{{history}}" wx:key="{{index}}">{{item}}</view>

   </view>

 </view>

</view>


<wxss>


#seek{

 position: absolute;

 left: 0;

 top: 0;

 width: 100%;

 height: 100vh;

 background-color: #F5F5F5;

 z-index: 199;

 

}

.seek{

 width: 100%;

 height: 108rpx;

 line-height: 108rpx;

 background-color: #6880C4;

 padding: 0 20rpx;

 position: fixed;

 display: flex;

 align-items: center;

 justify-content: space-around

}

input{

 width: 70vw;

 height: 48rpx;

 background-color: white;

 border-radius: 6rpx;

 font-size: 28rpx;

 padding-left: 20rpx;

 padding-right: 40rpx;

}

.cancel{

 position: absolute;

 top: 0;

 left: calc(70vw + 65rpx);

 z-index: 10;

 color: #999999;

}

.cancel{

 position: absolute;

 top: 0;

 right: 40rpx;

 z-index: 10;

 color: #999999;

 width: 56rpx;

}

.result{

 position: relative;

 top: 116rpx;

 

}

.text-result{

 opacity: 0.75;

 font-size: 28rpx;

 color: #3D3D3D;

 letter-spacing: 0;

 padding: 0 20rpx;

}

.history{

 margin-top: 42rpx;

 display: flex;

 flex-wrap: wrap;

}

.history-item{

 opacity: 0.75;

 font-size: 28rpx;

 color: #000000;

 letter-spacing: 0;

 background: #FFFFFF;

 border: 1rpx solid #dddddd;

 border-radius: 8rpx;

 text-align: center;

 height: 70rpx;

 line-height: 70rpx;

 margin: 0 20rpx 20rpx 20rpx;

 padding: 0 26rpx;

}

.quit{

 font-size: 28rpx;

}


<js>

onReady: function () {

   wx.hideLoading();


   // 实例化动画

   this.animation = wx.createAnimation({

     duration: 1000,

     timingFunction: 'ease-in-out',

   });

 },

 ShowSearchTap(){

   this.animation.opacity(1).step()

   this.setData({

     isSearch:true,

     animationData:this.animation.export()

   });


 },


最后一次编辑于  2017-12-20
回答关注问题邀请回答
收藏