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
+ +
+ + + + + +``` + + +