vue.js 过渡&动画

9-17

在add ,update, remove DOM时提供多种方式的应用过度效果。

包括以下可选工具：（2大类，css和js）

在css过度和动画中自动应用class
配合使用第三方css动画库. Animate.css
在hook function 中使用Javascript直接操作DOM
配合使用第三方Javascript动画库。 Velocity.js

进入／离开和列表的过度

单元素／组件的过度

尚未看初始渲染过度，多元素过度，多组件过度

transition 作为📦组件，可以在下列情况下，给元素和组件添加 in/out 过度。

v-if
v-show
动态组件 <component :is='调用组件名字的函数／实例的属性值'>
组件根节点

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

过读的类名

在进入／离开的过度中，有6个class切换

v-enter：定义进入过度的开始状态。在元素被插入之前生效，在元素插入之后的下一真移除。
v-enter-active: 定义进入过度生效时的状态。比如定义进入过度时间，延迟，曲线函数
v-enter-to: 定义进入过度的结束状态。在v-enter被移除时，它开始工作。在过度／动画完成之后移除。

v-leave: 定义离开过度的开始状态。在离开过度被触发时生效。下一真被移除　　　　
v-leava-active: 定义离开过度生效的状态。定义离开过度的过程时间，延迟，曲线函数。
v-leave-to: 定义离开过度的结束状态。在离开过度被触发后下一真生效，同时v-leave被移除。它本身在过度／动画完成后被移除。

如果组件transition被添加了name，则过度的类名的v前缀会被替换为name的值。

例如定义了组件transition的名字为fade。v-enter被替换为fade-enter

自己code Pen上的案例：

https://codepen.io/chentianwei411/pen/qMMazN

进入的过度3个，离开的过度3个。

css过度（常用的过渡）

CSS transitions系列属性：

让你可以在一个时间段内平滑的改变属性值(点击看视觉效果：案例)

transition: property duration timing-function delay ；

这是一个简洁shorthand属性，里面包含了4个要定义的特性。其实就是4个功能特性，组织在一起。

例子：

div {
    transition-property: width;   执行过度效果的css属性,可以是任意属性。
    transition-duration: 2s;　　   执行的总时间
    transition-timing-function: linear;　　执行的 速度曲线（默认是先慢后快，linear是相同速度）
    transition-delay: 1s;　　　　　　延迟开始执行的时间。
}

CSS transform系列属性

transform: xxx()

transformation是一个效果：让一个元素改变形状，尺寸，为位置。

⚠️：这个方法系列没有时间time.因素

可以translate(), rotate(), scale(), skew(x, y) element。

2d, 3d两种类型。

2d:

translate(x, y) 移动一个元素
scale(x, y) 改变元素的width, height
rotate(angle) 平面旋转
skew(x-angel, y-angle) 沿着x轴，y轴旋转

CSS动画：css Animations

Vue.js的用法同css过度，区别是v-enter类名在节点插入DOM后不会理解删除，而是在animationend事件触发时删除。

animationend事件是HTML DOM 对象中的Animation Object的事件。

自己code Pen上的案例：

https://codepen.io/chentianwei411/pen/EeeObE

什么是CSS Animations? (点击查看详解，大量案例)

css动画让大多数html元素变成动画，无需使用JS or flash。

动画：让一个元素从一个状态逐渐向另一个状态变化。可以在这个过程中改变元素的css属性。动画可以反复播放。

比较重要的方法：播放动画的时间animation-duration，播放的次数animation-iteration-count。

次要的方法：animation-direction播放的方向，这是操作@keyframes框架内的代码的执行顺序（normal reverse alternate等）

如何使用：为动画指定@keyframes。

@keyframes把元素的style在特定的时间段进行改变。

／／简单的格式简写：animation: name duration iteration-count
／／animation的属性比transation多多了，有11个之多。
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
 　　／／名字 每次移动总时间是5秒，无限次移动。
    animation: mymove 5s infinite;  
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}
</style>

标准的格式简写：animation: name duration timing-function iteration-count direction

自定义过度的类名

主要用于和第三方CSS动画库结合使用如Animate.Css (其实不难。)

列表过度

进入／离开过度
排序过度
交错过度

<transition-group>组件用于列表过度，如使用v-for。

特点：

渲染真实的DOM元素一个，默认<span>。可通过tag='元素名字'变更。
无过度模式（这是多个元素过度的特点，未学习）
每个内部元素都有一个key属性值。

<transition-group>支持CSS transform过度移动。

例子：

https://jsfiddle.net/m2v0orcn/2693/

解释：

name是"list-complete", 则列表中的每一项都会有一个list-complete-item类，可以为这个类增加transition: xxx属性。

列表的进入/离开过渡

posted @ 2018-09-17 11:56 Mr-chen 阅读(2751) 评论(0) 收藏举报

刷新页面返回顶部

Mr-chen