vue文字飞入飞出动画特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

10 36 13


特效描述:文字飞入飞出动画。vue css3彩色文字点击文字飞入效果、文字飞出效果、文字动画效果代码

代码结构

1. 引入JS

<script src="js/vue.min.js"></script>

2. HTML代码

<div id="app">
  <div class="text-wrapper">
    <div class="text part1">
      <anim-word v-bind:text="word1" @poof="rem"> </anim-word>
    </div>
    <div class="text part2">
      <anim-word v-bind:text="word2" @poof="rem"></anim-word>
    </div>
    <div class="how-to"> <span v-if="clickTimes === 0">Just click a letter...</span><span v-else-if="clickTimes >= 5 && clickTimes < totalLetters">Hahahahaaaa! Click em all!!</span><span v-else-if="clickTimes >= totalLetters">Yay you did it! You did it!!</span><span v-else="v-else">Keep going... </span></div>
  </div>
  <div class="reset" @click="back">
    <svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      <path d="M29 16 C29 22 24 29 16 29 8 29 3 22 3 16 3 10 8 3 16 3 21 3 25 6 27 9 M20 10 L27 9 28 2"> </path>
    </svg>
  </div>
</div>
<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: "5", alive: true },
        { char: "1", alive: true },
        { char: "前", alive: true },
        { char: "端", 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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
二十二
关注
TA的相关作品 >>更多


热门标签: html5动画导航菜单 html5图片动画 html5文字动画 html5表情动画 html5线条动画 html5飘落动画 html5光标动画 html5悬停动画 加载动画 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到