android css动画卡顿,nvue 中 transition 过度动画 安卓真机中、模拟器都特卡 , ios 过度比较流畅...

本文探讨了在nvue应用中遇到的Android平台CSS动画卡顿问题,尤其是在使用transition过度动画时。文章指出,虽然在iOS上动画表现流畅,但在Android真机和模拟器上则出现明显卡顿。解决方案可能涉及优化布局计算、减少渲染层、调整动画属性等。同时,文章提供了一个按钮布局示例,详细说明了计算每个项目样式的初始化方法。
摘要由CSDN通过智能技术生成

按钮

{ { num }}

export default {

data() {

return {

lists: ['A', 'B', 'C', 'D', 'E' ,'E' ,'E' ,'E' ,'E' ,'E' ,'E' ,'E' , ],

listMode: true, // 模式 默认一行一个项目

width: 750, // 列表宽

cols_1_margin_left: 0, // 一个项目的左边距

cols_1_margin_bottom: 15, //一个项目的底边距

cols_1_height: 300, // 一个项目的高

cols_2_margin_left: 20, // 两个项目的左边距

cols_2_margin_centre: 15, //两个项目的中边距

cols_2_margin_bottom: 20, //两个项目的左边距

cols_2_height: 460 // 两个项目的高

};

},

methods: {

/**

* 每个项目的样式计算初始化

* @param {Object} idx

*/

initProdStyle(idx) {

if (this.listMode) {

//一行一个

return {

width: `${this.width - this.cols_

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值