提交 d9549619 编写于 作者: DCloud_JSON's avatar DCloud_JSON

优化 示例项目 drop-card 飘动的卡片动画

上级 0e5db17f
...@@ -130,27 +130,36 @@ ...@@ -130,27 +130,36 @@
this.y = k * screenWidth * 0.5 this.y = k * screenWidth * 0.5
// 设置动画时间 // 设置动画时间
let time = 60; let transitionDuration = 300;
let topCardIndex = this.topCardIndex let floatCardIndex = this.topCardIndex
this.setINodeStyle('card',topCardIndex,'transitionProperty','transform'); this.setINodeStyle('card',floatCardIndex,'transitionProperty','transform');
this.setINodeStyle('card',topCardIndex,'transitionDuration',time); this.setINodeStyle('card',floatCardIndex,'transitionDuration',transitionDuration);
// this.setINodeStyle('card',topCardIndex,'transitionOrigin','bottom center'); // this.setINodeStyle('card',floatCardIndex,'transitionOrigin','bottom center');
this.moveCard() this.moveCard()
// 移动结束 // 移动结束
setTimeout(()=>{ setTimeout(()=>{
// 关闭动画 // 动画速度设置为0(即:关闭动画)
this.setINodeStyle('card',topCardIndex,'transitionProperty','scale'); this.setINodeStyle('card',floatCardIndex,'transitionDuration',0);
if(this.x != 0.0){ if(this.x != 0.0){
setTimeout(()=>{ // 飘动的卡片挪回中心
this.setINodeStyle('card',floatCardIndex,'transform', 'translate(0,0) rotate(0)')
this.setINodeStyle('state-icon-like',floatCardIndex,'opacity', 0)
this.setINodeStyle('state-icon-dislike',floatCardIndex,'opacity', 0)
// 坐标归零
this.x = 0 this.x = 0
this.y = 0 this.y = 0
this.moveCard()
this.setINodeStyle('card',topCardIndex,'transitionProperty','marginTop,scale'); // 动画改成marginTop,scale
this.setINodeStyle('card',floatCardIndex,'transitionProperty','marginTop,scale');
this.setINodeStyle('card',floatCardIndex,'transitionDuration',transitionDuration);
// 切换卡片顺序
this.currentIndex ++ this.currentIndex ++
// 根据最新卡片顺序,设置层级大小样式
this.initCardList() this.initCardList()
},100)
} }
},time) },transitionDuration)
} }
} }
...@@ -174,7 +183,7 @@ ...@@ -174,7 +183,7 @@
background-color: #FFF; background-color: #FFF;
/* transform-origin:bottom; */ /* transform-origin:bottom; */
transition:margin-top 60ms; transition:margin-top 60ms;
transition-timing-function: linear; transition-timing-function: ease-in;
} }
.card-img { .card-img {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册