<template>
  <div class="decoration-2" :ref="ref">
    <div :class="reverse ? 'reverse' : 'normal'" />
  </div>
</template>

<script>
export default {
  name: 'Decoration2',
  data () {
    return {
      ref: `decoration-2-${(new Date()).getTime()}`,
      width: 0,
      height: 0
    }
  },
  props: ['reverse'],
  methods: {
    init () {
      const { $nextTick, $refs, ref } = this

      $nextTick(e => {
        this.width = $refs[ref].clientWidth
        this.height = $refs[ref].clientHeight
      })
    }
  },
  mounted () {
    const { init } = this

    init()
  }
}
</script>

<style lang="less" scoped>
.decoration-2 {

  .reverse, .normal {
    background-color: #3faacb;
  }

  .normal {
    width: 0%;
    height: 1px;
    border-right: 1px solid #fff;
    animation: normal-amt 6s ease-in-out infinite;
  }

  .reverse {
    width: 1px;
    height: 0%;
    border-bottom: 1px solid #fff;
    animation: reverse-amt 6s ease-in-out infinite;
  }

  @keyframes reverse-amt {
    70% {
      height: 100%;
    }

    100% {
      height: 100%;
    }
  }

  @keyframes normal-amt {
    70% {
      width: 100%;
    }

    100% {
      width: 100%;
    }
  }
}
</style>