css3+vue彩色文字飞入飞出动画效果

查看演示 下载资源 下载积分： 10 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

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>