对 vue 的渐变效果的简单使用

单个节点的渐变效果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>动画测试</title>
  <link href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
  <script src="http://cdn.bootcss.com/vue/2.3.2/vue.js"></script>
  <style media="screen">
  </style>
</head>

<body>

  <div id="example">
    <button @click="show = !show">
    Toggle render
  </button>
    <!-- 同一个节点的多个显隐效果 -->
    <transition mode="out-in" enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutDown">
      <p v-if="show" key="1">hello</p>
      <p v-else key="2">world</p>
    </transition>
  </div>
</body>

<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {
      show: true,
    },
  })
</script>

</html>

这里解释一下 <transition> 中的参数问题:

  1. mode="out-in" 采用的切换模式是 先出后进,保证两个节点能平滑的切换显示, 还有一种是 in-out, 如果没有指定mode将同时生效,两个元素的动画同时触发这不是我现在需要的
  2. enter-active-class="animated fadeInDown" 元素显示时添加的 class , 这里使用了 animate.css,
  3. leave-active-class="animated fadeOutDown" 元素消失时显示的动画
  4. key 相同标签名中必须的标识,否则 vue 将不能区分元素内容

一种运用 key 简化判断的一种写法

1
2
3

<transition mode="out-in" enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutDown">
  <p :key="status">{{ status }}</p>
</transition>

它的效果等同于:

1
2
3
4
5
6
7
8

<transition mode="out-in" enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutDown">
  <button v-if="status === 'show'" key="show">
    show
  </button>
  <button v-if="status === 'hidden'" key="hidden">
    hidden
  </button>
</transition>

如果是多重的状态判断这个会很实用

多组件之间的状态过渡

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div id="example">
    <input type="radio" v-model="view" value="v-a">
    <input type="radio" v-model="view" value="v-b">
    <!-- 多个组件的过渡效果 -->
    <transition mode="out-in" enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutDown">
      <component v-bind:is="view"></component>
    </transition>
  </div>


  <script type="text/javascript">
    new Vue({
      el: '#example',
      data: {
        view: 'v-a'
      },
      methods: {},
      components: {
        'v-a': {
          template: '<div>Component A</div>'
        },
        'v-b': {
          template: '<div>Component B</div>'
        }
      }
    })
  </script>

这种情况下部需要添加 key 值了,因为每次动态渲染的时候都只有一个