本文共 1663 字，大约阅读时间需要 5 分钟。

mateshow@ mate...

_WIDGET安卓 确认您是否已经阅读并同意我们的隐私政策以及使用cookie和相关技术来提高服务的使用体验。

确认阅读并同意

.widget deut授予我们...

Effects

Thinking

Our team initially used pure CSS animation but found it inefficient due to constant code duplication. We then switched to using transitions for smoother and more maintainable animations.

To ensure optimal performance, we utilized the onReady() lifecycle hook in our JavaScript code. This allows us to trigger animations only after the page has fully loaded, preventing premature animation reset.

Code

WXML

   
  
        
     
            Item {{index}}    
     
  
      
    
         Next Page  
    
   

WXSS

page {  background: #f0f0f0;}.common {  height: 100rpx;  opacity: 0;  margin-left: -50rpx;  background: #ffffff;  margin-top: 20rpx;  line-height: 100rpx;  padding: 25rpx;}/* Yellow box effect */transition: all 0.5s ease-in-out;$$opacityVar: index >= (page-1)*2 ? 1 : 0;$$marginRightVar: index >= (page-1)*2 ? 0 : -50;

JavaScript

Page({  data: {    list: ['List Item 1', 'List Item 2'],    lists: ['List Item 1', 'List Item 2'],    page: 1  },  onLoad: function() {},  onReady: function(e) {    this.setData({      op: 1,      mr: 0    });  },  nextPage: function(e) {    this.data.page++;    // Simulated loading of next page data    var nextLists = this.data.lists.concat(this.data.list);    this.setData({      lists: nextLists,      page: this.data.page,      op: 0,      mr: -50    });    this.onReady();  }});

In this implementation, we leveraged the transition property in WXSS to handle the animation effect efficiently. By using data-bound variables (opacity and marginRight), we achieved smooth transitions without repetitive code.