Vue Transition 实现类原生组件跳转过渡动画

whatsns 发布于2019-08-21 12:01 / 3181人阅读

摘要：官方文档演示地址请在移动端查看，端查看请打开移动端调试模式前言看了挺多的框架都不带过渡动画，今天心血来潮，就把自己平时用的动效抽离出来。原理模版中使用了提供的封装组件，配合类名在的六种不同的状态过渡中切换。

官方文档：https://cn.vuejs.org/v2/guide...

演示地址：http://www.coderlife.com (请在移动端查看，PC端查看请打开移动端调试模式)

前言

看了挺多Vue的UI框架都不带过渡动画，今天心血来潮，就把自己平时用的动效抽离出来。可直接通过脚手架init模版配合其他UI框架使用，不需要另外进行配置。

原理

模版中使用了Vue提供的封装组件 transition，配合CSS类名在 enter/leave 的六种不同的状态过渡中切换。

对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用可以重置前缀，比如 v-enter 替换为 my-transition-enter。

重写跳转函数

// 根据具体的跳转类型更改跳转属性值，执行不同的动画
const nextDirection = (direction) => {
  let el = document.getElementById("app")
  if (el) el.setAttribute("transition-direction", direction)
}

router["_push"] = router["push"]

// 重写路由跳转方法，设置跳转类型后跳转
router.forward = router["push"] = (target) => {
  nextDirection("forward")
  setTimeout(() => { router["_push"](target) })
}

// 重写路由返回方法，设置跳转类型后跳转到上一页
router.back = (target) => {
  nextDirection("back")
  if (target) {
    setTimeout(() => { router["_push"](target) })
  }
  history.go(-1)
}

How to use

# init template
vue init CoderLQChou/v-transition-template my-transition-app

# cd project
cd my-transition-app

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

仓库地址：https://github.com/CoderLQCho... 欢迎star

GPU云服务器云服务器翻转过渡动画 ios过渡动画 jquery过渡动画 vue组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87359.html

指尖前端重构（React）技术调研分析

摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...

AlphaWallet 2019-08-23 18:18 评论0 收藏0
Vue.js进入/离开&列表过度动画。

摘要：包括以下工具在过渡和动画中自动应用可以配合第三方动画库，如在过渡钩子函数中使用直接操作可以配合使用第三方动画库，如在这里，我们只会讲到进入离开和列表的过渡。不仅可以进入和离开动画，还可以改变定位。概述 Vue在插入、更新或则移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具： *在CSS过渡和动画中自动应用class *可以配合第三方CSS动画库，如Animate.css *...

thekingisalwaysluc 2019-08-23 15:23 评论0 收藏0
vue.js起步式（二）

摘要：当需要和第三方的动画库，比如配合时会非常有用显式声明过渡类型新增需要给过渡元素添加事件侦听器来侦听过渡何时结束。在下例中我们使用注册一个自定义的过渡元素已被插入在动画结束后调用与相同然后用特性中渐近过渡与一起用时可以创建渐近过渡。 8.方法与事件处理器方法处理器可以用 v-on 指令监听 DOM 事件： Greet 我们绑定了一个单击事件处理器到一个方法 greet。下面在...

BearyChat 2019-08-20 10:29 评论0 收藏0
VUE2.0学习笔记

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。差别在哪里将特性名转换为从开始支持语法糖，会扩展成一个更新父组件绑定值的侦听器。如果需要条件渲染多个元素，可以使用包裹。 1.前言安装直接用引入（本地或者cdn） npm npm install vue vue-cli官方脚手架 # 全局安装 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 评论0 收藏0
vue内置组件——transition简单原理图文详解

摘要：在元素被插入之前生效，在元素被插入之后的下一帧移除。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。版及以上定义进入过渡的结束状态。基本概念 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如...

lingdududu 2019-08-22 18:39 评论0 收藏0