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


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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
原生js实现照片墙效果
Oct 13 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
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
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
js判断是否是手机页面
2017/03/17 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
Python异常学习笔记
2015/02/03 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python 实现兔子生兔子示例
2019/11/21 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
办公室副主任职责范本
2014/03/08 职场文书
纪检监察建议书
2014/05/19 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
办公室主任个人总结
2015/02/28 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫