今天遇到一個需求是在一個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,
    }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  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)      
      }) 
    }
  }
})

結(jié)果發(fā)現(xiàn)在點擊時其它元素會發(fā)生抖動。ps:git就不鬧了，想知道情況的小伙伴可以自己試下。
然后看了看老大寫的代碼，發(fā)現(xiàn)是用scale改變大小。抄過來發(fā)現(xiàn)其它元素真的不抖動了。以后等比例放大的話還是用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：今天突然面試突然問起這個問題，又結(jié)合最近學(xué)到的知識，感覺這個內(nèi)部放大抖動的問題應(yīng)該是改變幾何尺寸引起重繪和重流了，用tansform的話就不會引起重繪了重流了。