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

【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;
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值