微信小程序实现点击卡片 翻转效果


Posted in Javascript onSeptember 04, 2019

动画效果:

 微信小程序实现点击卡片 翻转效果 

wxml:

<view class='main'>
  <!--正面的框 -->
  <view class="box b1" animation="{{animationMain}}" bindtap='rotateFn' data-id="1" >
   <image src=""></image>
  </view>
  <!--背面的框 -->
  <view class="box b2" animation="{{animationBack}}" bindtap='rotateFn' data-id="2">
   <image src=""></image>
  </view>
</view>

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(),
   })
  }
 },
})

总结

以上所述是小编给大家介绍的微信小程序实现点击卡片 翻转效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
定义select的边框颜色
Apr 28 Javascript
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
编程语言JavaScript简介
Oct 16 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 #Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 #Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 #Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 #Javascript
layui 表单标签的校验方法
Sep 04 #Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 #Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 #Javascript
You might like
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
php 生成短网址原理及代码
2014/01/23 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
浅谈五大Python Web框架
2017/03/20 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
浅谈django orm 优化
2018/08/18 Python
Python的pygame安装教程详解
2020/02/10 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Python 在函数上添加包装器
2020/07/28 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
植树节标语
2014/06/27 职场文书
公证委托书标准格式
2014/09/11 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
家长评语怎么写
2014/12/30 职场文书
公司奖励通知
2015/04/21 职场文书
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js