From faf86e11d8e7d0d26d0dde388cd438ff46cd522a Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Fri, 15 Jun 2018 22:23:06 +0800 Subject: [PATCH] =?UTF-8?q?add=20Vue=202.x=EF=BC=9A=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E8=BF=87=E6=B8=A1=E7=B1=BB=E5=90=8D=E5=AE=9E=E7=8E=B0=E5=8A=A8?= =?UTF-8?q?=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 21-Vue基础/04-Vue动画.md | 201 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 199 insertions(+), 2 deletions(-) diff --git a/21-Vue基础/04-Vue动画.md b/21-Vue基础/04-Vue动画.md index 5915ecf..c20a40a 100644 --- a/21-Vue基础/04-Vue动画.md +++ b/21-Vue基础/04-Vue动画.md @@ -36,11 +36,10 @@ PS：第一、第二个是时间点；第三个是时间段。 PS：第一、第二个是时间点；第三个是时间段。 -### 使用举例 +### 使用举例（通过Vue的过渡类名来实现） 温馨提示：`v-enter-to`和`v-leave`的状态是一样的。而且一般来说，`v-enter`和`v-leave-to`的状态也是一致的。所以，我们可以把这四个状态写成两组。 - 现在我们来做个例子：点击按钮时，让div显示/隐藏。 **1、引入**： @@ -147,6 +146,204 @@ PS：第一、第二个是时间点；第三个是时间段。 ``` +上方代码中，我们使用vue提供的``标签把需要被动画控制的元素，包裹起来；然后使用`.v-enter`、`.v-leave-to`等进行动画的定义。 + +运行效果如下： + +20180615_2200.gif + + +**3、再加一个tramsform属性进行位移**： + + +我们在上方代码的基础之上，加一个tramsform属性，让动画有一个位移的效果。完整代码如下： + + +效果如下： + +20180615_2205.gif + + +```html + + + + + + + + Document + + + + + + +
+ + + + + +

这是一个H3

+ +
+ + + + + +``` + + +### 修改过渡类名的前缀 + +在上一小段中，`.v-enter`、`.v-leave-to`这些过渡类名都是以`v-`开头的。这样做，会有一个问题：假设有两个DOM元素都用``进行了包裹，那这两个DOM元素就都具备了`v-`中所定义的动画。 + +那**如果我们想把两个DOM元素的动画进行分开定义**，该怎么做呢？这里，我们可以通过修改过渡类名的前缀来做。比如： + +第一步：（自定义别名） + +```html + +
这是一个H6
+ +``` + +上方代码中，我们加了`name="my"`。 + +第二步：（我们就可以使用 `my-enter`、`.my-leave-to`这些类名了） + +```css + .my-enter, + .my-leave-to { + opacity: 0; + transform: translateY(70px); + } + +``` + + +完整代码举例如下； + + +```html + + + + + + + + Document + + + + + +
+ + + + + +

这是一个H3

+ + +
+ + + + + + + +
这是一个H6
+ +
+ + + + + +``` + + +