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


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 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
Javascript的this用法
Jan 16 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
如何检查一个对象是否为空
Apr 11 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
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
CI框架表单验证实例详解
2016/11/21 PHP
php unlink()函数使用教程
2018/07/12 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
koa-router源码学习小结
2018/09/07 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
业务部主管岗位职责
2014/01/29 职场文书
ktv好的活动方案
2014/08/17 职场文书
考试没考好检讨书
2015/05/06 职场文书
Python+Appium新手教程
2021/04/17 Python
Python基于百度AI实现抓取表情包
2021/06/27 Python