<template>
  <div class="snake-bar" :class="snack_bar_class">
    <div class="warp">
      <div class="content">{{msg}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SnakeBar",
  props: ["msg"],
  data() {
    return {
      snack_bar_class: ""
    };
  },
  computed: {},
  methods: {
    openSnackBar(content) {
      this.snack_bar_class = "higher-snake-bar";
      setTimeout(() => {
        this.snack_bar_class = "lower-snake-bar";
      }, 2500);
    },
  },
  created() {
    this.openSnackBar();
  },
  mounted() {},
  watch: {},
  beforeDestroy() {},
  components: {},
  activated() {}
};
</script>
<style scoped lang="scss" type="text/scss">
.snake-bar {
  position: fixed;
  left: 0;
  bottom: -1.2rem;
  width: 100%;
  .warp {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    height: 1.2rem;
    background: #ebf6ff;
    .content {
      margin-left: 0.3rem;
      padding-left: 0.3rem;
      font-size: 0.35rem;
      line-height: 1.2rem;
      letter-spacing: 2px;
      color: #249cff;
    }
  }
}
.higher-snake-bar {
  animation: snakeToHigh 0.5s ease;
  animation-fill-mode: forwards;
}

.lower-snake-bar {
  animation: snakeToLow 0.5s ease;
  animation-fill-mode: forwards;
}

@keyframes snakeToHigh {
  0% {
    bottom: -1.2rem;
  }
  100% {
    bottom: 0rem;
  }
}

@keyframes snakeToLow {
  0% {
    bottom: 0rem;
  }
  100% {
    bottom: -1.2rem;
  }
}
</style>
