只要是发布同城顺风车咨询，以发贴的方式发布顺风车信息

[图片] - 预期表现 iOS12.0.2上绑定动画translateY的视图层级显示无效，安卓正常， 代码采用美团mpvue编写 <template> <div class='box-video'> <swiper        indicator-dots="true"        indicator-color="#fff"        indicator-active-color="#000"        autoplay="true"        circular="true"        interval='1500'        class="swiper"      > <swiper-item v-for="(item,index) in imgarr" :key="index"> <img :src="item" alt mode='aspectFill' @click="onpreven(item)"> </swiper-item> </swiper> <div class='imgbox' v-show="name" :animation="animations"> <div class='title' :animation='animationY'>188</div> <!-- <div class='hidenn'></div> --> <div class='header' :animation='animationx'> <img src="http://sphbvideo.25010086.com/20190109141136.png" alt=""> </div> <div class="imgs" @click="cesh"> <img src='http://sphbvideo.25010086.com/20190109143923.png' @error='onse' @load='load'/> </div> <div class='open' @click="open"  :animation='animation'> <img src='http://sphbvideo.25010086.com/20190109094223.png' /> </div> </div> <div class='box' @click="click">点击</div> </div> </template> <script> export default { data(){ return{ name:true, imgarr:[ 'http://sphbvideo.25010086.com/11-4.jpg', 'http://sphbvideo.25010086.com/11-3.jpg', 'http://sphbvideo.25010086.com/11-2.jpg' ], animation:{}, animations:{}, animationx:{}, animationY:{}, animation:null, } }, methods:{ click(){      // this.dan() this.fade()      // this.titles()      // console.log(123)      // this.name=!this.name }, cesh(){ this.opens=!this.opens }, onpreven(item){ wx.previewImage({ current:item, urls:this.imgarr }) }, titles(){ var animation =  wx.createAnimation({ duration:500, timingFunction:'linear', }) animation.translateY(-30).step() this.animationY=animation.export() }, titlesy(){ var animation =  wx.createAnimation({ duration:0, timingFunction:'linear', }) animation.translateY(0).step() this.animationY=animation.export() }, dan(){ var animation =  wx.createAnimation({ duration:200, timingFunction:'linear', }) animation.opacity(0).step() this.animationx=animation.export() }, dans(){ var animation =  wx.createAnimation({ duration:0, timingFunction:'linear', }) animation.opacity(1).step() this.animationx=animation.export() }, fade(){ var animation =  wx.createAnimation({ duration: 300, timingFunction:'linear', }) var height=wx.getSystemInfoSync().windowHeight animation.translateY((height/2)+150).step() this.animations=animation.export() this.open() }, fades(){ var animation =  wx.createAnimation({ duration:0, timingFunction:'linear', }) var height=wx.getSystemInfoSync().windowHeight animation.translateY(0).step() this.animations=animation.export() this.name=true; }, open(){ this.title=false; var animation =  wx.createAnimation({ duration: 2000, timingFunction:'linear', }) animation.rotateY(720).step() this.animation=animation.export()      // this.animation=animation setTimeout(()=>{ animation.rotateY(0).step(); this.animation=animation.export() this.dan() this.titles() this.setint() },1000)      // this.opens=!this.opens      // this.title=true }, setint(){ setTimeout(()=>{ this.name=!this.name this.fades() this.dans() this.titlesy()        // this.animationx={}        // this.animation={}        // this.animations={}        // this.animationY={}        // this.animation=null },5000) }, onse(e){ console.log(e) }, load(){ this.fade() } } } </script> <style lang="less"> .swiper{ width:100%;  // border:1px solid red; height: 100vh; img{ width: 100%; height: 100%; } } .box-video{ width:100%; height: 100vh; .video{ width: 100%; height: 100%; } } .imgbox{ position: fixed; top:0; left: 50%; width: 240px; height: 300px; background:#D62520; margin-left: -120px; margin-top:-300px; z-index: 9999999; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;    // border-radius: 8px; .header{ position: absolute;      // height: 100%; height:85px; top:0; left: 0; width: 100%; z-index: 9999999; img{ width: 100%; height: 100%; } } img{ width: 100%; height: 100%; } .title{ position: absolute;      // top: 12.5px; background: #F4B158; top:10px; left: 50%; line-height:70px; height:85px; margin-left: -48%; width:96%; text-align: center; color:red; font-size:28px; } .imgs{ position: absolute; width: 100%; height: 100%; img{ width: 100%; height: 100%; } } .open{ position: absolute; bottom: 62px; height:80px; width: 80px; border:2px solid gold; border-radius: 50%; left: 51%; margin-left: -40px; } } .box{ width: 50px; height: 50px; border-radius: 50%; position: fixed; top:50%; background: #fff; right: 10px; } </style>