【Vue移动端】页面进入特效实现–翻转

白云悠悠苍狗悠悠茶水一杯温润入喉

本来今日正在浏览csdn 学习学习Koa 秃然微信 " ding" 嚯？什么情况？先瞅瞅
CSS?这不挺简单吗! 可是随着聊天我觉得事情慢慢沉重起来…

先是聊了一个需求我觉得匪夷所思… 要在移动端中实现一个页面翻转！移动端！带入场那种…

来接着看需求…

大致就是这样我梳理了一下需求:

1.要求特效图片是以一种旋转方式进去页面
2.可以是左旋转 也可以是右旋转
3.Vue框架实现 不用Jquery

思路：

1.我的思路是左边页面单击事件  右面你想显示的组件用 transition标签包裹
2.组件里面绑定样式属性 v-bind:style = "styleobj" 这种的 然后data里面修改属性

这很简单啊!

but…
页面是这种效果…

绕一圈旋转之后来到了如图位置…

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>我曾听风来,又着踏雪去</title><script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script><style>.container {width: 350px;height: 500px;background-color: aqua;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.box {width: 350px;height: 500px;background-color: red;position: absolute;left: 50%;top: 50%;/* transform: translate(-50%, -50%); */}</style></head><body><div id="app"><div class="container" @click="show = !show"><transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:leave="leave"v-bind:css="false"><div v-if="!show" class="box"></div></transition></div></div><script src="./vue.js"></script><script>var vm = new Vue({el: "#app",data: {show: true},methods: {beforeEnter: function(el) {el.style.opacity = 0;el.style.transformOrigin = "20% 40%";},enter: function(el, done) {Velocity(el, { opacity: 0.8}, { duration: 300 });Velocity(el,{ rotateZ: "360deg" },{ duration: 600 },);},}});</script></body>
</html>

这绝对不是我要的效果!太丑了！

那么该怎么解决呢？首先一个最明显问题中心旋转点错了很明显一眼看出,好办改一下 el.style.transformOrigin = “center”; 再看看效果

没有效果了只能在原地360旋转了明显也不对。。。

最后经过讨论查询资料修改代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>我曾听风来,又着踏雪去</title><script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script><style>.container {width: 100px;height:200px;background-color: aqua;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.box {width: 100px;height:200px;background-color: red;}</style></head><body><div id="app"><div class="container" @click="show = !show"><transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-bind:css="false"><div v-if="!show" class="box"><!-- 这里写你需要实现翻转的代码 --></div></transition></div></div><script src="./vue.js"></script><script>var vm = new Vue({el: "#app",data: {show: true},methods: {beforeEnter: function(el) {// el.style.display= blockel.style.transformOrigin = 'right'  // 这是右翻转   left 是左翻转  center是中间翻转},enter: function(el, done) {// Velocity(el, { opacity: 1}, { duration: 300 });Velocity(el,{ rotateZ: "360deg" },  // 360 角度翻转 根据产品需求 设置角度就行{ duration: 600 },);},}});</script></body>
</html>

页面效果也是实际需求效果了即有进场动画等(不会发视频…)

对比错误代码:

1.position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);

这段代码舍弃。。。因为会影响旋转中心

el.style.opacity= 1

也舍弃了我这里只考虑动画实现效果不考虑淡入淡出过渡效果

最后功能实现！感觉功能呢完成心情愉悦…(红色框是重点)

最后总结:

篇幅有限就不多说什么了实际上在实现过程中还是遇上了许许多多的现实问题什么进入顺序角度等我们一直在讨论
多研究多探讨能使我们更快想到解决办法后来我实现了一个版本我觉得可以了发给他了他看了说这个效果是显示出内容才要转页面这部多此一举吗？我觉得很有道理然后继续修改… （内心活动如下.jpg）
还想到什么伪类元素添加盒子我写个定时器来实现等等最后我改动了一行代码实现了… 还是很快乐的
遇上需求不断解决需求，遇上难点不断解决难点这才是前端工作意义所在!

Vue移动端----页面旋转进入特效功能实现相关推荐

vue支付宝html,Vue的H5页面唤起支付宝支付功能
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支 ...
vue移动端页面demo
一.调查表页面(展示效果) 根据网上许多移动端项目案例,总结其他方法,汇总方法如下. 二.vue移动端项目搭建 1.在安装了node.js的前提下,使用以下命令 npm install --g vue ...
【Vue】Vue移动端页面自适应解决方案
移动端页面自适应解决方案该方案使用相当简单,把下面这段已压缩过的原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewpo ...
vue移动端页面调用手机拍照_vue实现PC端调用摄像头拍照、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式...
export default { () { return {} }, methods: { # // 压缩图片 and 旋转角度纠正下方代码 # 需要自行去掉个人只作为着色效果加上 compres ...
Vue移动端页面下拉刷新
这篇小作文有点长,不想看的朋友可以直接去找找vant组件中的 van-pull-refresh 朋友们,我这两天干了一件蠢事最近我们公司有一个移动端项目,是嵌在微信公众号中的,有一个新需求是给页面加 ...
Vue移动端项目——搜索联想建议功能的实现（结合watch属性和使用lodash防抖节流）
搜索联想建议 1. 基本思路: 当搜索框输入内容的时候,请求加载联想建议的数据将请求得到的结果绑定到模板中 2. 基本功能一.将父组件中搜索框输入的内容传给联想建议子组件二.在子组件中监视搜索框 ...
vue -- 移动端(vant)更换头像剪切功能
效果: 思路: 利用 file input 特性,获取到选中的图片. 借助 vue-cropper 实现头像剪裁功能,然后把剪裁的头像上传至服务器,完成更换头像操作代码: myDetails.vue ...
一看就懂的vue移动端实现左滑删除功能
效果图页面模板代码 <div><move-left v-if="list.length>0" :list="list" :del_wi ...
html2canvas+canvas2image 做vue移动端页面海报
做了3天左右,海报的效果终于实现了,我只想说太坑了...................... 首页介绍2个插件1 html2canvas 是把DOM结构生成canvas2 canvas2image ...

Vue移动端----页面旋转进入特效功能实现

【Vue移动端】页面进入特效实现–翻转

白云悠悠苍狗悠悠茶水一杯温润入喉

Vue移动端----页面旋转进入特效功能实现相关推荐

最新文章

热门文章

Vue移动端----页面旋转进入特效功能实现

【Vue移动端】页面进入特效实现–翻转

白云悠悠 苍狗悠悠 茶水一杯 温润入喉

Vue移动端----页面旋转进入特效功能实现相关推荐

最新文章

热门文章

白云悠悠苍狗悠悠茶水一杯温润入喉