5.6 Vue transition功能扩展（子div可附加动画）+ JS构造CSS3-Animation动画_export const playmode = { sequence: 0, loop: 1, ra-程序员宅基地

1、 监听路由变化

  watch: {
    '$route' () {
      // 此处写router变化时，想要初始化或者是执行的方法......
    }
  }

2、 语义化数据对象
通常建立 common/js/config.js

export const playMode = {
  sequence: 0,
  loop: 1,
  random: 2
}

3、 ::before伪元素。写法&::before（子集） 和同级class写法&.active（同级） ，相似。
但是却表示子集，而不是同级

4、vue @click事件，既获取vue对象，又获取index.
在这里插入图片描述
5、设置了position:absolute 那么继承的CSS则根据附属元素来。而不是上一个父层
在这里插入图片描述

6、vue transition标签，可以按需对子div进行动画定义

在这里插入图片描述
父集transition-duration 必须大于子transition-duration

7、JS编程方式构造CSS动画(create-keyframe-animation)

由github提供的库 create-keyframe-animation进行实现。
步骤如下
1、需求分析。计算坐标偏移量 X, Y。
在这里插入图片描述
经计算 X： -147.5px Y： 407px
2、绑定transition的@enter@afterEnter@leave@afterLeave动画钩子

  <transition name="normal"
                @enter="enter"
                @afterEnter="afterEnter"
                @leave="leave"
                @afterLeave="afterLeave">

3、封装计算偏移量方法_getPosAndScale() {}

    _getPosAndScale () {
      const paddingLeft = 40
      const paddingBottom = 30
      const paddingTop = 80
      const targetWidth = 40
      const width = window.innerWidth * 0.8
      const scale = targetWidth / width // 初始缩放比例
      const x = -(window.innerWidth / 2 - paddingLeft)
      const y = window.innerHeight - width / 2 - paddingTop - paddingBottom
      return {
        x,
        y,
        scale
      }
    }

4、 在transition钩子函数中执行代码（贴一个@enter@enterAfter）

enter (el, done) {
      const {x, y, scale} = this._getPosAndScale()
      console.log(x, y)
      let animation = {
        0: {
          transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`
        },
        60: {
          transform: `translate3d(0, 0, 0) scale(1.1)`
        },
        100: {
          transform: `translate3d(0, 0, 0) scale(1)`
        }
      }

      animations.registerAnimation({
        name: 'move',
        animation,
        presets: {
          duration: 400,
          easing: 'linear'
        }
      })

      animations.runAnimation(this.$refs.cdWrapper, 'move', done)
    },
    afterEnter () {
      // 清空animation
      animations.unregisterAnimation('move')
      this.$refs.cdWrapper.style.animation = ''
    }

5、效果如下
在这里插入图片描述

后边还有leave钩子和leaveAfter钩子，动画较简单，故直接绑定 transition动画即可。

leave (el, done) {
      this.$refs.cdWrapper.style.transition = 'all .4s'
      const {x, y, scale} = this._getPosAndScale()
      this.$refs.cdWrapper.style[transform] = `translate3d(${x}px, ${y}px, 0) scale(${scale})`
      this.$refs.cdWrapper.addEventListener('transitionend', done) // 必须增加监听并done，不然动画一直处于执行状态，无法进行任何操作。
    },
    afterLeave (el, done) {
      this.$refs.cdWrapper.style.transform = ''
      this.$refs.cdWrapper.style.transition = ''
    },
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40196738/article/details/89875550

智能推荐

ESP8266和ESP32区别，以及优缺点分析！_esp8266为什么不建议使用-程序员宅基地

文章浏览阅读3.4k次，点赞3次，收藏4次。高速主频240MHZ，对比STM32F1的72MHZ和STM32F4的168MHZ，速度快很多，而且价格上比起一直在涨价的STM系低出非常多；总的来说，STM32在国内的使用程度和受众程度是远大于ESP32的，毕竟STM32已经占据主流市场很久了，学习的资料比起ESP32起来会多，再加上一些开源问题，使用32的人群还是占据多数。2016年，乐鑫推出了ESP32，它是ESP8266的升级版本，速度更快还带有蓝牙4.2和蓝牙低功耗，价格在20元左右，在这个价格下几乎找不到对手可以“一战”。_esp8266为什么不建议使用

linux 分区简介,Linux硬盘分区知识简介-程序员宅基地

文章浏览阅读990次。Linux系统可以挂载多个不同接口类型的磁盘(disk)，每一个磁盘又可以分成若干个分区(Partition)，每个分区又可以拥有自己的文件系统类型(FileSystem)。Linux对于磁盘和分区又自己的一套标记方法。硬盘和分区的区分第一个SCSI(Small Computer System Interface)磁盘记为/dev/sda，第二个SCSI磁盘记为/dev/sdb；第一个SATA磁盘..._linux引导分区的标记可为

unity 网络游戏架构设计（第12课：网络游戏案例讲解）之美_网络游戏消息结构设计案例-程序员宅基地

文章浏览阅读656次。第12课：网络游戏案例讲解上章给读者介绍关于服务器之间的通信，本章通过案例给读者介绍如何将框架跟 Photon 结合起来，实现一个网络通信的框架设计。UI 架构设计模块已经介绍过，我们的 Demo 使用的 UI 是 UGUI，简单的用几个 Button 代替 Sprite，它们的原理是一样的。我们先创建一个 UI，如下图所示：这个 UI 主要有三个关键按钮，分别是 Create Roo..._网络游戏消息结构设计案例

Android-Gradle详解_grade编译运行安卓-程序员宅基地

文章浏览阅读548次。Android 构建系统非常灵活，可让你在不修改应用核心源代码文件的情况下执行自定义构建配置。本部分将介绍 Android 构建系统的工作原理，以及它如何帮助你对多个构建配置进行自定义和自动化处理。构建过程涉及许多将你的项目转换为 Android 应用程序包 (APK) 的工具和过程。构建过程非常灵活，因此了解一些幕后发生的事情很有用。下图为Android 应用模块的构建过程。Android 应用模块的构建过程（如上图所示）遵循以下一般步骤：1、编译器将你的源代码转换为 DEX（Dalv_grade编译运行安卓

linux网络配置后面加一条wheel,linux安全配置/etc/sudoers&wheel组-程序员宅基地

文章浏览阅读800次。/etc/sudoers 控制哪些用户能在哪些主机上以哪些用户的身份执行哪些命令。只有此文件权限为440时才能用户才能使用sudo命令，只有root用户才能使用visudo命令修改此文件。当然也可以先添加文件写权限，然后修改，再把文件权限改回来。此文件的一些配置规则定义别名：User_Alias UserName = user1,user2,kongoveHost_Alias HostName =..._%wheel all=(all) all

NO.15——使用Appium自动化测试爬取微信朋友圈数据_appium监测微信图片-程序员宅基地

文章浏览阅读9.7k次，点赞5次，收藏27次。 一、解析过程本人使用锤子手机做测试，型号是YQ601，首先打开开发者模式确保手机能与mac相连，打开Appium客户端，配置参数如图可以理解为Appuim继承自web端的selenium，同样可以执行一些自动化操作。Appium自带了一个XPATH选择器，给用户提供了选择结果，如图这个选择器给出的结果太繁琐，所以可以改成通过查找ID的方式来构造爬虫程序。但是这里要注意，估计微信提升了自己..._appium监测微信图片

随便推点

交叉编译工具 aarch64-linux-gnu-gcc 的介绍与安装-程序员宅基地

文章浏览阅读8w次，点赞20次，收藏160次。aarch64-linux-gnu-gcc 是由 Linaro 公司基于 GCC 推出的的 ARM 交叉编译工具_aarch64-linux-gnu-gcc

数码管扫描显示verilog_如何开始Xilinx FPGA开发之旅 第二课 EGO1数码管与键盘-程序员宅基地

文章浏览阅读1.4k次。庚子年，我们的EGO1在疫情当中作为口袋实验平台成为了众多高校的复课利器。其中的成功案例更是得到了新华社网媒与CCTV教育频道的报道。借此东风，为了让更多的老师与学生熟悉了解Xilinx，更好的入门学习FPGA知识，我们的师资培训直播已开设EGO1专题直播，欢迎新老朋友跟踪关注。第二课---- EGO1数码管与键盘本周的直播我们将介绍EGO1的外设使用案例，介绍数码管扫描的原理和PS/2..._fpgaego1 键盘

python re库安装_python 库安装方法及常用库-程序员宅基地

文章浏览阅读3.6k次。python库安装方法：方法一：setpu.py1.下载库压缩包，解压，记录下路径：*：/**/……/2.运行cmd，切换到*：/**/……/目录下3.运行setup.py build4.然后输入python，进入python模块，验证是否安装成功方法二：1.Win + R 打开运行窗口，输入cmd回车2.找到pip安装路径——x:\Python xx\Scripts3. 在命令行中切换至该目录c..._rep库怎么安装

android listview fling,ListView优化: Fling(松开滑动) 过程中不加载数据-程序员宅基地

文章浏览阅读189次。1.Adapter增加滑动结束以后刷新方法//定义当前listview是否在滑动状态private boolean isScrolling = false;public void setScrolling(boolean scrolling) {this.isScrolling = scrolling;}public void refreshOnScrollEnd(AdapterView list..._android listview fling

微信公众号JSAPI自费支付总结_微信自动续费api-程序员宅基地

文章浏览阅读535次。文章目录前言一、准备操作1.公众号ID2.商户号3.商户号密钥4.域名、服务器二、步入正题1. 支付流程2. 初始化订单数据2.读入数据总结前言本编章主要是通过运行一个自费测试demo使其能够快速了解微信自费支付的实现流程，也是个人实现微信自费demo之后的记录、总结官方文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1一、准备操作进行微信自费支付之前请先获得以下几项必要条件，公众号和商户号需要绑定名称_微信自动续费api

java byte 字节负数-程序员宅基地

文章浏览阅读2w次。由于通讯协议中长度使用byte字节来表示，但在java中长度超过127的时候会变成负数，所以需要保证得到的长度是正数byte b & 0xFFhttp://www.blogjava.net/orangelizq/archive/2008/07/20/216228.html在剖析该问题前请看如下代码public static String bytes2HexString(

推荐文章

热门文章

相关标签