怎么在微信小程序中实现一个点击卡片翻转效果-创新互联

本篇文章给大家分享的是有关怎么在微信小程序中实现一个点击卡片翻转效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

成都创新互联公司是一家专注于网站设计、网站建设与策划设计,桐庐网站建设哪家好?成都创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:桐庐等地区。桐庐做网站价格咨询:18980820575

  

wxml:

wxss:

.main {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 300px;
 height: 300px;
 transform: translate(-50%,-50%);
 -webkit-perspective: 1500;//子元素获得透视效果 
 -moz-perspective: 1500;
}
 
.box {
 position: absolute;
 top: 0;
 left: 0;
 width: 300px;
 height: 300px;
 transition: all 1s;
 backface-visibility: hidden;
 border-radius: 10px;
 cursor: pointer;
}
.box image{
 border-radius: 10px;
 width: 100%;
 height: 100%;
}
.b1{
 background:skyblue;
}
.b2 {
 background:tomato;
 transform: rotateY(-180deg);
}
js: 
Page({
 data: {
  animationMain:null,//正面
  animationBack:null,//背面
 },
 rotateFn(e) {
  var id = e.currentTarget.dataset.id
  this.animation_main = wx.createAnimation({
    duration:400,
    timingFunction:'linear'
   })
   this.animation_back = wx.createAnimation({
    duration:400,
    timingFunction:'linear'
   })
  // 点击正面
 
  if (id==1) {
   this.animation_main.rotateY(180).step()
   this.animation_back.rotateY(0).step()
   this.setData({
    animationMain: this.animation_main.export(),
    animationBack: this.animation_back.export(),
   })
  }
  // 点击背面
  else{
   this.animation_main.rotateY(0).step()
   this.animation_back.rotateY(-180).step()
   this.setData({
    animationMain: this.animation_main.export(),
    animationBack: this.animation_back.export(),
   })
  }
 },
})

以上就是怎么在微信小程序中实现一个点击卡片翻转效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

文章名称：怎么在微信小程序中实现一个点击卡片翻转效果-创新互联
文章地址：http://jkwzsj.com/article/dhjgie.html