一个with值动态改变的横柱增长效果，微信小程序超过审核时间，微信小程序教程。with的值由data传入到style属性中，transition实现动效。
模拟器和安卓系统上效果正常，IOS端无动效


wxml代码


class="{{status==2 ? 'result-bar' : ''}} {{status==2 && item.optionId == ra ? 'right-bar' : 'false-bar'}} {{item.bar == '630rpx' ? 'full-bar' : ''}}"
style="width:{{status==2 ? item.bar : '0'}}"
>





wxss代码



.result-bar {
height:100%;
border-radius:25px 0 0 25px;
display:flex;
align-items:center;
position: absolute;
transition-property: width;
transition-duration: 300ms;
transition-timing-function: linear
}



微信小程序开发问题解答 本文来自微信小程序工厂 http://www.xcxgc.com，转载请保留。

本文网址：http://www.91bianli.com/weixinxiaochengxu/32845.html