1.用了transition + transform 位移了但是没有过渡效果
- 用了 uni.createanimation 没效果
- 用了weex的 animation 也不行
有没有大佬做过，最好能发一份实力代码，谢谢啦
Aa董小礼
- 发布：2020-06-18 11:43
- 更新：2020-06-18 19:22
- 阅读：4415
CSS 大概是这样,需要动态变一下
data(){
return{
load : false
}
}
<view class="videoLoad center" :style="{ height: height + 'px', width: '750rpx' }">
<image ref="test" src="../../static/livePush/load.png" mode="aspectFill" class="load" :class="load ? 'loadRotate' : ''"></image>
<text class="cfff loadText">主播马上就来...</text>
</view>
.load {
width: 300rpx;
height: 300rpx;
margin-top: -360rpx;
margin-bottom: -50rpx;
transform: rotateY(0deg);
transition-property: transform;
transition-duration: 3000;
}
.loadRotate {
transform: rotateY(180deg);
}setTimeOut(()=>{
this.load = true
},2000)在给你个JS版本
const animation = weex.requireModule('animation')
animation.transition(this.$refs.test, {
styles: {
transform: 'rotate(180deg)',
transformOrigin: 'center center'
},
duration: 3000, //ms
needLayout: true, //ms
timingFunction: 'linear',
delay: 0 //ms
}, () => {})
Aa董小礼 (作者)
想做一个如图，点击一次爱心，弹出一个缓慢向上浮动的泡泡，怎么搞
<image src="../../static/livePush/pao01.png" class="pao" v-for="(val, index) in likeList" key="val.id" ></image>Like() {
this.likeList.push({
val: this.likeIndex,
id: new Date().getTime()
});
},
现在我是点击一次，往数组里面添加一个项
都给你js版本了
<image src="../../static/livePush/pao01.png" class="pao" v-for="(val, index) in likeList" key="val.id" :ref="'pao_'" + index>
const animation = weex.requireModule('animation')
Like() {
this.likeList.push({
val: this.likeIndex,
id: new Date().getTime()
});
animation.transition(this.$refs['pao_' + this.likeList.length - 1], { // 这里用length 做的demo 你可以用id
styles: {
transform: 'translateX(40px)',
opacity: '1',
transformOrigin: 'center center'
},
duration: 3000, //ms
needLayout: true, //ms
timingFunction: 'linear',
delay: 0 //ms
}, () => {
// 这里做动画完成 在隐藏或删除节点
})
},
.pao {
transform: 'translateY(-40px)';
opacity: 0;
}
Aa董小礼 (作者)
<!-- 视频加载蒙层 -->
<view class="videoLoad center" :style="{ height: height + 'px', width: '750rpx' }">
<image ref="test" src="../../static/livePush/load.png" mode="aspectFill" class="load"></image>
<text class="cfff loadText">主播马上就来...</text>
</view>
}
代码如上，旋转了，但是没有过渡效果
2020-06-18 15:07