IOS css3属性transition 不生效

guoxi1994 commented 3 months ago

   <div ref="an1" class="scene-head" :class="[isTurnOnAnimate && 'isTurnOnAnimate']" :style="{ height: imgHeight + 'px' }">
      <image
        ref="an2"
        class="scene-head-image"
        :class="[isTurnOnAnimate && 'isTurnOnAnimate']"
        :style="{ transform: `scale(${scaleMultiple})`, height: imgHeight + 'px' }"
        :src="scene.picUrl"
        placeholder="./assets/image/home/ad-default.png"
      />
      <div class="scene-head-linear"></div>
      <div class="scene-head-con">
        <text class="scene-name"></text>
        <text class="scene-desc"></text>
      </div>
    </div>

.isTurnOnAnimate { transition: height,transform 0.5s ease-in-out; }

firekyrin commented 3 months ago

来信收悉，非常感谢！============http://www.firekyrin.com

guoxi1994 commented 3 months ago

来信收悉，非常感谢！============http://www.firekyrin.com

animation.transition(this.$refs.an1, { styles: { height: 508 }, duration: 500, //ms timingFunction: 'linear', needLayout: true, delay: 0 //ms }) 用这种方式可以实现回弹动画，但是会导致另外一个问题！先执行完动画，布局再改变（给人一个跳动的感觉），应该是needLayout没有生效

alibaba / weex

IOS css3属性transition 不生效 #3345