vue 移动端过渡效果_Vue应用程序的超级简单魔术移动过渡_cuk5340的博客-程序员ITS203

技术标签: ViewUI  python  css  java  vue  js  

vue 移动端过渡效果

超速驾驶 (vue-overdrive)

Super easy magic-move transitions for Vue apps, powered by Ramjet.

由Ramjet支持的Vue应用程序的超级轻松魔术移动过渡。

项目安装 (Project Install)

# npm
npm install vue-overdrive
# yarn
yarn add vue-overdrive

例子 (Examples)

Material

1)变形形状 (1) Morph Shapes)

https://vue-overdrive.netlify.com/#/shapes

https://vue-overdrive.netlify.com/#/shapes

Shape morph

2)材质转换 (2) Material-esque transformation)

https://vue-overdrive.netlify.com/#/libraries

https://vue-overdrive.netlify.com/#/libraries

Material transformation

3)iOS风格的图标效果 (3) iOS-inspired icon effect)

https://vue-overdrive.netlify.com/#/icons

https://vue-overdrive.netlify.com/#/icons

iOS icon effect

它是如何工作的? (How does it work?)

Just like with React Overdrive, wrap any two elements in a component. Add the same id to create a transition between the elements.

就像React Overdrive一样,将任意两个元素包装在一个 零件。 添加相同的ID,以在元素之间创建过渡。

导入并安装 (Import and install)

import Overdrive from 'vue-overdrive'
Vue.use(Overdrive)

or

要么

import { VOverdrive } from 'vue-overdrive'

// Register the component locally
components: {
  'overdrive': VOverdrive
}

使用Vue Router设置(至少)两条不同的路线 (Set up (at least) two different routes with Vue Router)

Inside your routes file –

在您的路线文件中–

{
  path: '/circle',
  name: 'Circle',
  component: Circle
},
{
  path: '/rectangle',
  name: 'Rectangle',
  component: Rectangle 
}

脚手架 (Scaffold your components)

In Circle.vue:

Circle.vue

<template>
  <overdrive id="element" :easing="easing" :duration="350">
    <div class="circle"></div>
  </overdrive>
</template>

<script>
import * as easing from 'eases/quart-in-out' // Bring 'yr own easing functions!
export default {
  name: 'el-circle',
  data () {
    return {
      easing
    }
  }
}
</script>

<style scoped>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: blue;
    float: left;
  }
</style>

And in Rectangle.vue

Rectangle.vue

<template>
  <overdrive id="element">
    <div class="rectangle"></div>
  </overdrive>
</template>

v-if用法 (Usage with v-if)

If you're not using Vue Router (and instead using Vue's built-in v-if directive), be sure to specify a unique key prop on each instance of <overdrive>

如果您不使用Vue路由器(而是使用Vue的内置v-if指令),请确保在<overdrive>每个实例上指定唯一的key道具

<overdrive key="a" id="window" :duration="450" v-if="!windowOpen">
  <!-- some element -->
</overdrive>
<overdrive key="b" id="window" :duration="450" v-if="windowOpen">
  <!-- some element -->
</overdrive>

自定义(API) (Customize it (API))

Prop Description Default Value
id Required. A unique string or number to identify the component.
tag Wrapping element type div
duration Animation duration (in milliseconds) 250
easing Easing Function (must pass a function) ramjet.linear
Struts 描述 默认值
ID 需要。 标识组件的唯一字符串或数字。
标签 包装元件类型 div
持续时间 动画持续时间(以毫秒为单位) 250
缓和 缓动功能(必须通过功能) ramjet.linear
Event Description
@animation-end Fires once the ramjet animation has completed
事件 描述
@animation-end 冲压喷气机动画完成后触发

去做 (Todo)

  • [ ] Minimize the jank (especially with v-if)

    []最小化垃圾(尤其是v-if )

  • [x] Find a non-Vuex solution for state management

    [x]查找用于状态管理的非Vuex解决方案

翻译自: https://vuejsexamples.com/super-easy-magic-move-transitions-for-vue-apps/

vue 移动端过渡效果

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cuk5340/article/details/107698809

智能推荐

# 废物的靶场日记 hackthebox-Pandora_ore0的博客-程序员ITS203

废物的靶场日记 hackthebox-Pandora今天做easy难度的pandora靶场 靶机IP 10.10.11.136前渗透还是老样子信息收集 nmap -sV -A 10.10.11.13622/tcp open ssh OpenSSH 8.2p1 Ubuntu 4ubuntu0.3 (Ubuntu Linux; protocol 2.0)80/tcp open http Apache httpd 2.4.41 ((Ubuntu)

Web UI自动化之Excel用例读取_你不知道的我-的博客-程序员ITS203_web excel开发ui

本文讲解了如何从 Excel 表格中读取测试用例并在 TestNG 中执行。使用的例子是打开百度首页,输入用户名和密码,完成登录。Excel 表格中的用例如图我们将这个 Excel 取名为 test.xls,放在 resource 目录下,注意要将 resource 设为 Source Folder(右键点击文件夹 -&gt; Build Path -&gt; Use as Source F...

磁盘最优存储问题---Python__柒染、的博客-程序员ITS203

题目描述设有n 个程序{1,2,…, n }要存放在长度为L的磁带上。程序i存放在磁带上的长度是Li, 1&lt;= i&lt;= n。这n 个程序的读取概率分别是p1,p2,…,pn,且pi+p2+…+pn = 1。如果将这n 个程序按 i1,i2,…,in 的次序存放,则读取程序ir 所需的时间tr=c*(Pi1Li2+Pi2Li2+…+Pir*Lir)。这n 个程序的平均读取 时间为t1+...

Collecting package metadata (current_repodata.json): failed skimage sklearn_Amiao_89的博客-程序员ITS203_下载sklearn collecting package metadata (repodata.js

小白配置环境,各种采坑,多谢网上各位大佬分享,总结下亲身经历环境:Ubuntu18.04 RTX3070CUDA 11.0 CUDNN 8.0.5.39Anaconda3-2020.11-Linux-x86_64pytorch 1.7.0 python 3.8.51、Collecting package metadata (current_repodata.json): failed详细教程:https://blog.csdn.net/qq_36287702/article/details/1

使用Adsutil.vbs脚本获取IIS配置信息及账号密码 _maxiaoqiang1的博客-程序员ITS203

<br />今晚在搞个黑客站的时候拿下旁站权限,但不能夸到目标站的目录下,眼看目标就在眼前却被最后一道关卡给卡死了。之前也有尝试过pr提权,单asp一执行pr就卡死了。。<br /><br />       无奈之下找了群里龙儿心一起来研究,龙儿心经验不错,到shell上立马就搞定了目标站的路径,获取IIS网站路劲和其他基本信息也是使用一个VBS脚本搞定的,这个在我blog中有一个文章帖出来代码。这里我将就再帖下,并说明用法!<br /><br />Set ObjService=GetObject("IIS

Mac monkeyrunner的简单使用1_C--罗纳尔多的博客-程序员ITS203

一.首先熟悉流程1.打开录制界面2.保存录制的脚本3.运行录制的脚本首先我们将脚本保存,记住路径,我定义文件名是runner.py#coding=utf-8import sysfrom com.android.monkeyrunner import MonkeyRunner as mrfrom com.android.monkeyrunner.recorder im...

随便推点

element el-cascader-panel级联面板配合动态加载造成的问题_someWhere_weMeet的博客-程序员ITS203_el-cascader-panel

使用element的el-cascader-panel级联面板,正常使用的话,第三级会存在多余请求或者请求加载效果(不知道是不是我写法有问题)。目前百度的全是级联选择器,找不到级联面板的的内容,记录一下。&lt;div class="addFormWrap"&gt; &lt;div class="addLeft"&gt; &lt;h2&gt;选择类目&lt;/h2&gt; &lt;div c

查准率、查全率、准确率、召回率_AI搬砖小能手的博客-程序员ITS203

查准率就是准确率,查全率就是召回率《机器学习》中用混淆矩阵来理解:

dice,准确率(Accuracy)、精确率(Precision)、召回率(Recall)、F值(F-Measure),PCC计算pytorch代码_一堆乱码45763058的博客-程序员ITS203_dice accuracy

具体的原理就不讲解了,直接上代码label和predict都是one-hot 型def compute_PCC(predicts,label): assert(predicts.shape==label.shape) PCC=[] for i in range(predicts.shape[1]): n = predicts.shape[0]*predicts.shape[2]*predicts.shape[3] TP = ((predicts[:

linux postgresql 创建数据库,Linux下创建Postgresql数据库的方法步骤_weixin_34044446的博客-程序员ITS203

Linux下创建Postgresql数据库的方法步骤前言PostgreSQL (也叫 Postgres)是一个自由的对象-关系数据库服务器(数据库管理系统),它在灵活的 BSD-风格许可证下发行。因为之前用默认的配置创建pgsql数据库,导致root的占用率达到97%:所以决定重新创建一次数据库,很多坑又忘了。为了避免以后再忘记,所以决定记录下面,分享出来供大家参考学习,下面来一起看看详细的介绍吧...

ES6学习笔记(三)字符串的扩展_weixin_30316097的博客-程序员ITS203

ES6 加强了对 Unicode 的支持,并且扩展了字符串对象。1.字符的Unicode表示法JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。1 "\u0061"2 // "a"从来不知道好可以这么做。但是,这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式...

推荐文章

热门文章

相关标签