<template>
    <div id="fontcontain">
      <template  v-for="(font,index) in fonts" >
        <template v-if="font=='^'">
          <br/>
        </template>
        <template v-else>
          <span :key="index" :style="`color: #900048;animation-delay:${index%2?0.66:0.33}s;`" v-if="fontstyle=='colors'">{{font}}</span>
          <span :key="index" :style="`animation-delay:${delay}s;animation-duration:${duration}s;animation-iteration-count:${loop?'infinite':'initial'}`"  v-else-if="fontstyle=='random'">{{font}}</span>
          <span :key="index" class="tip animated fadeInUpBig" :style="`animation-delay:${.2*(index+1)+delay}s;animation-duration:${duration}s;animation-iteration-count:${loop?'infinite':'initial'}`" v-else>{{font}}</span>
        </template>
      </template>
    </div>
</template>

<script>
    export default {
        name: "font",
      props:{
          fonts:{
            default:["这","是","测","试","文","字","很","多","的","文","字"]
          },
        fontstyle:{
            default:''
        },
        duration:{
          default:1
        },
        delay:{
          default:0
        },
        loop:{
          default:false
        }
      },
      data(){
        return{
          show:true,
          setInterval:null,
        }
      },
      mounted(){
      },
      watch:{
      }
    }
</script>

<style scoped lang="scss">
  span{
    display: inline-block;
  }
  .flyInto{
        span {
          display: inline-block;
          text-shadow: 0 0 20px whitesmoke;
          -webkit-animation: smoky 1s 1s both;
          animation: smoky 1s 1s both;
          -webkit-transform: translate3d(300px, -100px, 0) rotate(-40deg) skewX(70deg) scale(1.5);
          transform: translate3d(300px, -100px, 0) rotate(-40deg) skewX(70deg) scale(1.5);
          text-shadow: 0 0 20px whitesmoke;
          opacity: 0;
        }
        span:nth-child(even) {
          -webkit-transform: translate3d(350px, -130px, 0) rotate(-40deg) skewX(70deg) scale(1.5);
        }
        @-webkit-keyframes smoky {
          60% {
            text-shadow: 0 0 40px whitesmoke;
          }
          to {
            -webkit-transform: translate3d(0rem, -0rem, 0) rotate(-0deg) skewX(0deg) scale(1);
            transform: translate3d(0rem, 0rem, 0) rotate(-0deg) skewX(0deg) scale(1);
            text-shadow: 0 0 0 whitesmoke;
            opacity: 1;
          }
        }
        @keyframes smoky {
          60% {
            text-shadow: 0 0 40px whitesmoke;
          }
          to {
            -webkit-transform: translate3d(0rem, -0rem, 0) rotate(-0deg) skewX(0deg) scale(1);
            transform: translate3d(0rem, 0rem, 0) rotate(-0deg) skewX(0deg) scale(1);
            text-shadow: 0 0 0 whitesmoke;
            opacity: 1;
          }
        }
  }
  .bounce{
    span{
      transform: translate3d(0,-100%,0);
      animation: spanbounce 1s 1s both;
    }
    @keyframes spanbounce {
      from{
        transform: translate3d(0,-100%,0);
        opacity: 0;
      }
      60%{
        opacity: 0.2;
        text-shadow: 0 0 40px whitesmoke;
      }
      to{
        transform: translate3d(0,0,0);
        opacity: 1;
      }
    }
  }
  .marquee{
    span{
      opacity: .5;
      animation: marquee1 .1s both;
    }
    @keyframes marquee1{
        from{
          opacity: .5;
        }
        to{
          opacity: 1;

        }
    }
  }
  .colors{
    span{
      animation:  blink 1s steps(1, start) 0.33s infinite;
    }

    @keyframes blink {
      33% {
        color: #FF4057;
      }
      66% {
        color: #FF8260;
      }
    }
  }
  .typer{
    span{
      animation: typer .2s linear both;
      opacity: 0;
    }

    @keyframes typer {
      from{
        opacity: 0;
      }
      to{
        opacity: 1;
      }
    }
  }
  .bounceInUp{
    span{
      animation: bounceInUp1 1s both;
    }
  }
  .bounceInDown{
    span{
      animation: bounceInDown1 1s both;
    }
  }
  .cross{
    span{
      animation: bounceInDown1 1s both;
    }
    span:nth-child(even){
      animation: bounceInUp1 1s both;
    }
  }
  .flipInY{
    span{
      transform: rotate(45deg);
      animation: flipInY 3s both;
    }
  }
  .hinge1{
    span{
      animation: swing 2s both;
    }
  }
  @keyframes bounceInUp1 {
    from,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 50%, 0);
      transform: translate3d(0, 50%, 0);
    }

    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
    }

    75% {
      -webkit-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);
    }

    90% {
      -webkit-transform: translate3d(0, -5px, 0);
      transform: translate3d(0, -5px, 0);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes bounceInDown1 {
    from,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -50%, 0);
      transform: translate3d(0, -50%, 0);
    }

    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
    }

    75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }

    90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .random span:nth-child(4n+1){
    animation: fadeInDownBig 1s both;
  }
  .random span:nth-child(4n+2){
    animation: fadeInUpBig 1s both;
  }
  .random span:nth-child(4n+3){
    animation: fadeInLeftBig 1s both;
  }
  .random span:nth-child(4n+4){
    animation: fadeInRightBig 1s both;
  }
</style>
