基础示例

• 常驻动画通过db-transition指令添加, :后为添加事件值为添加动画名称。

点击： 触发

移入： 触发

<template>
  <div>
    点击：
    <db-button v-db-transition:click="heartBeat">触发</db-button>
  </div>
  <div style="margin-top:20px;">
    移入：
    <db-button v-db-transition:mouseover="heartBeat">触发</db-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      heartBeat: 'heartBeat'
    }
  }
}
</script>

Expand Copy Copy

• 我们也可以通过修改指令的值为json,通过time进行设定动画时长

点击： 触发

<template>
  <div>
    点击：
    <db-button v-db-transition:click="heartBeat">触发</db-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      heartBeat: {
        class: 'heartBeat',
        time: 3000
      }
    }
  }
}
</script>

Expand Copy Copy

• 通过cb参数可以设置动画完成时候的回调

点击： 触发

<template>
  <div>
    点击：
    <db-button v-db-transition:click="heartBeat">触发</db-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      heartBeat: {
        class: 'heartBeat',
        time: 3000,
        cb() {
          console.log('动画完成')
        }
      }
    }
  }
}
</script>

Expand Copy Copy

• 我们也可以指定class为数组来添加多个动画

点击： 触发

<template>
  <div>
    点击：
    <db-button v-db-transition:click="heartBeat">触发</db-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      heartBeat: {
        class: ['heartBeat', 'backInDown'],
        time: 1000
      }
    }
  }
}
</script>

Expand Copy Copy

• 如果我们指定mode为queue那么就会队列执行动画，此时我们的class将为json数组。数组外的time将失效会使用数组内的time。

点击： 触发

<template>
  <div>
    点击：
    <db-button v-db-transition:click="heartBeat">触发</db-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      heartBeat: {
        class: [
          {
            name: 'heartBeat',
            time: 1000
          }, {
            name: 'backInDown',
            time: 3000
          }, {
            name: 'wobble',
            time: 280
          }],
        mode: 'queue'
      }
    }
  }
}
</script>

Expand Copy Copy

• 设置停顿，设置entranceTime时长为动画入场停顿

点击： 触发

<template>
  <div>
    点击：
    <db-button v-db-transition:click="heartBeat">触发</db-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      heartBeat: {
        class: [
          {
            name: 'heartBeat',
            time: 1000,
            entranceTime: 2000
          }],
        mode: 'queue'
      }
    }
  }
}
</script>

Expand Copy Copy

• 使用指令的钩子函数 (opens new window)触发，这样我们可以达到节点载入时候执行动画效果 注：如果是单纯显示和隐藏请使用<db-transition>，如果是无v-if判断时候初次载入页面可以使用v-db-transition，切记v-if的移除动画v-db-transition是不可用的，以下例子只是展示效果

inserted 插入父节点

显示

<template>
  <div>
    <p>inserted 插入父节点</p>
    <db-button @click="open = !open">{{`${open ? '隐藏' : '显示'}`}}</db-button>
    <p v-if="open">
      <db-button v-db-transition:inserted="heartBeat">inserted</db-button>
    </p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      open: false,
      heartBeat: 'heartBeat'
    }
  }
}
</script>

Expand Copy Copy