css3+vue彩色文字飞入飞出动画效果免费下载

一款好看的css3+vue实现的彩色文字飞入飞出动画效果,点击文字飞出动画,然后又飞入回来,很棒的vue文字动画特效。

JS代码

<script src="js/vue.min.js"></script> 
<script> 
Vue.component("anim-word", { 
  props: ["text"], 
  template: ` 
  <div> 
    <span class="letter" v-for="(letter, index) in text.letters"  
      @click="$emit('poof', text.id, letter.char)" 
      v-bind:class="{ poofed: !letter.alive }" 
    > 
      <div class="character">{{ letter.char }}</div>  
      <span></span> 
    </span> 
  </div> 
  ` 
}); 
 
new Vue({ 
  el: "#app", 
  data: { 
    clickTimes: 0, 
    word1: { 
      id: 1, 
      letters: [ 
        { char: "c", alive: true }, 
        { char: "o", alive: true }, 
        { char: "d", alive: true }, 
        { char: "i", alive: true }, 
        { char: "n", alive: true }, 
        { char: "g", alive: true } 
      ] 
    }, 
    word2: { 
      id: 2, 
      letters: [ 
        { char: "s", alive: true }, 
        { char: "u", alive: true }, 
        { char: "c", alive: true }, 
        { char: "a", alive: true }, 
        { char: "i", alive: true }, 
        { char: "h", alive: true }, 
        { char: "u", alive: true }, 
        { char: "o", alive: true } 
      ] 
    }, 
    totalLetters: 0 
  }, 
  mounted() { 
    this.totalLetters = this.word1.letters.length + this.word2.letters.length; 
  }, 
  methods: { 
    rem(id, letter) { 
      // update text 
      if (!this.clicked) { 
        this.clickTimes++; 
      } 
 
      // word 1 
      if (id === 1) { 
        this.word1.letters = this.word1.letters.map(function(item) { 
          if (item.char == letter) { 
            item.alive = false; 
          } 
          return item; 
        }); 
      } else if (id === 2) { 
        // word 2 
        this.word2.letters = this.word2.letters.map(function(item) { 
          if (item.char === letter && item.alive !== false) { 
            item.alive = false; 
            letter = null; 
          } 
          return item; 
        }); 
      } 
    }, 
 
    back() { 
      // Reset text 
      this.clickTimes = 0; 
 
      // Restore letter position 
      this.word1.letters = this.word1.letters.map(function(item) { 
        item.alive = true; 
        return item; 
      }); 
      this.word2.letters = this.word2.letters.map(function(item) { 
        item.alive = true; 
        return item; 
      }); 
    } 
  } 
}); 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录