diff --git a/21-Vue基础/04-Vue动画.md b/21-Vue基础/04-Vue动画.md index c20a40a..4b1aa7a 100644 --- a/21-Vue基础/04-Vue动画.md +++ b/21-Vue基础/04-Vue动画.md @@ -13,7 +13,7 @@ 过渡类名如下： - +20180616_1555.png 动画进入： @@ -184,7 +184,7 @@ PS：第一、第二个是时间点；第三个是时间段。 .v-leave-to { opacity: 0; /* 在动画中加入位移 */ - transform: translateX(80px); + transform: translateX(80px); /* smyhvae提示：v-enter表示，一开始让DOM元素处于靠右80px的位置 */ } /* v-enter-active 【入场动画的时间段】 */ @@ -227,7 +227,7 @@ PS：第一、第二个是时间点；第三个是时间段。 ### 修改过渡类名的前缀 -在上一小段中，`.v-enter`、`.v-leave-to`这些过渡类名都是以`v-`开头的。这样做，会有一个问题：假设有两个DOM元素都用``进行了包裹，那这两个DOM元素就都具备了`v-`中所定义的动画。 +在上一小段中，`.v-enter`、`.v-leave-to`这些过渡类名都是以`v-`开头的。这样做，会有一个局限性：假设有两个DOM元素都用``进行了包裹，那这两个DOM元素就都具备了`v-`中所定义的动画。 那**如果我们想把两个DOM元素的动画进行分开定义**，该怎么做呢？这里，我们可以通过修改过渡类名的前缀来做。比如： @@ -261,82 +261,136 @@ PS：第一、第二个是时间点；第三个是时间段。 - - - - Document - - + .my-enter-active, + .my-leave-active { + transition: all 1s ease; + } + -
- - - - - -

这是一个H3

- +
+ + + + + +

这是一个H3

+ -
+
- - - - - - -
这是一个H6
- -
+ + + + + + +
这是一个H6
+ +
- + + + + +``` + +运行效果如下： + +20180616_1513.gif + +## 使用第三方animate.css类库实现动画 + +animate.css网址： + +- 官方网站： + + +**代码举例**： + +下面的代码中，我们使用animate.css提供的`bounceIn`、`bounceOut`这两个类来做入场、离场的动画。代码如下： + +```html + + + + + + + + Document + + + + + + +
+ + + +

这是一个H3

+ + +
+ + @@ -344,6 +398,304 @@ PS：第一、第二个是时间点；第三个是时间段。 +上面的代码中，注意： + +注意1：`enter-active-class`和`leave-active-class`这两个类名是Vue动画里的关键词，不能写成自己**随意起**的类名。 + +注意2：`bounceIn`、`bounceOut`这两个类不能直接使用，要在前面加上`animated`这个类；否则动画是不会生效的。当然，上面的代码中，我们还可以把`class = animated`这个代码移到

标签里，效果是一样的，如下： + +```html + + +

这是一个H3

+ + +``` + + +运行效果如下： + +20180616_1538.gif + +**改进1**：（统一设置入场、出场动画的持续时间） + +我们把上面的代码改进一下，如果我们想给入场、出场动画设置持续的时间，可以使用`:duration`来做。如下： + + +```html + + + +

这是一个H3

+ +``` + + +**改进2**：（分别设置入场、出场动画的持续时间） + +```html + + + +

这是一个H3

+ +``` + + +## 钩子函数实现半场动画 + +只有出场动画、没有离场动画，这种就是属于半场动画。比如你把一件商品加入收藏，会出现一个动画；当再次点击收藏按钮的时候却看不到动画效果，这就说明，只有前一半才有动画。 + + +半场动画，可以使用钩子函数来实现。 + + +### 动画的钩子函数介绍 + +可以在属性中声明 JavaScript 钩子函数：（这八个钩子函数可以理解成是动画的生命周期） + +```html + + + +``` + + +我们可以这样理解：上面这八个钩子函数（四个入场、四个离场），对应了八个事件，我们要紧接着在methods中定义八个函数。 + +如果要定义半场动画，做法是：直接在methods中写入场函数，不写离场动画即可。 + +### 举例：使用钩子函数模拟小球半场动画 + +现在要实现的例子是：点击按钮后，让小球进行移动。完整代码如下： + +```html + + + + + + + + Document + + + + + +
+ + + +
+ +
+ + + + + + +``` + + +运行效果如下： + +20180616_1618.gif + +上面的代码中，有两个地方要注意： + + +**注意1**： + +`el.offsetWidth`这行代码不能少。虽然这行代码没有实际的意义，但是少了之后，动画效果出不来： + +20180616_1620.gif + +当然，我们也可以把这行代码换成`el.offsetHeight`、`el.offsetLeft`、`el.offsetTop`之类的，只要包含了offset就行。 + + +**注意2**： + +`enter()`函数里，函数的第二个参数要加上`done`，函数体的最后一行要写`done()`，表示**立即执行**后面的`afterEnter()`函数；如果没有这个`done`，则会**延迟执行**后面的`afterEnter()`函数： + +20180616_2145.gif + +Vue官方文档的解释是这样： + + + > 当只用 JavaScript 过渡的时候，在`enter`和`leave`中必须使用`done`进行回调。否则，它们将被同步调用，过渡会立即完成。 + + + + +## 使用transition-group元素实现列表动画 + +现在的场景是：在一个`
    `列表中，如果我想给指定的某个`li`添加动画效果，该怎么做呢？需要声明的是，这些`li`是用v-for循环进行遍历的。 + +如果我们用``把`li`包裹起来，就会让所有的`li`都具备了动画，这显然是不可取的。 + +那该怎么做呢？这里我们就可以用到`transition-group`。 + +**代码举例1**：点击添加按钮后，给新增的 item 加个动画 + +```html + + + + + + + + Document + + + + + +
    + +
    + + + + + +
    + + + + + + + +
  • + {{item.id}} --- {{item.name}} +
    • +     + + +
    + + + + + +``` + +运行效果如下： + +20180616_2240.gif + + + + + + + + +