- 预期表现

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>