scroll-view内部实现图片放大

今天遇到一个需求是在一个scroll-view里面很多item，点击其中一个放大，刚开始想着用width和height控制

.theme-list {
  height: 230rpx;
  /* background-color: lightblue; */
  white-space: nowrap;
  display: flex;
}

.theme-item {
  height: 100%;
  width: 300rpx;
  text-align: center;
  font-size: 24rpx;
  margin-right: 10rpx;
  display: inline-block;
}

.theme-title{
  height: 36rpx;
}

.theme-item:last-child {
  margin-right: 0;
}

.img-box {
  width: 300rpx;
  height: 180rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-box > .image{
  height: 90%;
  width: 90%;
  transition: all, 0.5s;
}

.title-active{
  color: pink;
  font-size: 28rpx;
  transition: all 0.5s;
}
/*这里使用width和height控制大小*/
.img-box > .active{
  width: 100%;
  heigth: 100%;
}

<!--components/c2b-show-box/c2b-show-box.wxml-->
<view class="scroll-box">
  <scroll-view class="theme-list" scroll-x="true" scroll-into-view="{{toView}}"
  scroll-with-animation="true"
  >
    <view class="theme-item" 
    id="item{{index}}" wx:for="{{themes}}" data-index="{{index}}" bindtap="viewTheme" >
      <view class="theme-title {{index == themeSelected ? 'title-active' : ''}}">{{item.title}}</view>
      <view class="img-box">
        <image class="image {{index == themeSelected ? 'active' : ''}}"src="{{item.src}}"></image>a
      </view>
    </view>
  </scroll-view>
</view>

// components/c2b-show-box/c2b-show-box.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    themes:{
      type: Object,
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    toView: '',
    themeSelected: 0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    viewTheme: function(e){
      console.log(e)
      let ind = e.currentTarget.dataset.index
      this.setData({
        themeSelected: ind,
        toView: 'item' + (ind > 1 ? ind - 1 : 0)      
      }) 
    }
  }
})

结果发现在点击时其它元素会发生抖动。ps:git就不闹了，想知道情况的小伙伴可以自己试下。
然后看了看老大写的代码，发现是用scale改变大小。抄过来发现其它元素真的不抖动了。以后等比例放大的话还是用scale吧。

/* components/c2b-show-box/c2b-show-box.wxss */
.theme-list {
  height: 230rpx;
  /* background-color: lightblue; */
  white-space: nowrap;
  display: flex;
}

.theme-item {
  height: 100%;
  width: 300rpx;
  text-align: center;
  font-size: 24rpx;
  margin-right: 10rpx;
  display: inline-block;
}

.theme-title{
  height: 36rpx;
}

.theme-item:last-child {
  margin-right: 0;
}

.img-box {
  width: 300rpx;
  height: 180rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-box > .image{
  height: 162rpx;
  width: 270rpx;
  transition: all, 0.5s;
}

.title-active{
  color: pink;
  font-size: 28rpx;
  transition: all 0.5s;
}

.img-box > .active{
  transform: scale(1.1);
}

更新于2021-4-2：今天突然面试突然问起这个问题，又结合最近学到的知识，感觉这个内部放大抖动的问题应该是改变几何尺寸引起重绘和重流了，用tansform的话就不会引起重绘了重流了。