【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;