【vue2动画效果】实现两组单词逐渐减短，最后只保留首字母的效果

前言

实现两组单词逐渐减短，最后只保留首字母的效果

效果：

正文

<template>
  <div class="header">
    <div style="margin-right: 12px; display: inline-flex">
      <div
        class="door"
        id="book1"
        v-for="(letter, index) in lettersBook1"
        :key="index"
        :style="{
    
    
          animationDelay: `${
      
      (lettersBook1.length - index - 1) * 0.2}s`,
        }"
        :class="{ fadeOut: index !== 0 && isShowFade }"
      >
        <span class="left-panel">{
    
    {
    
     letter }}</span>
      </div>
    </div>
    <div style="display: inline-flex">
      <div
        class="door"
        id="book2"
        v-for="(letter, index) in lettersBook2"
        :key="index"
        :style="{
    
    
          animationDelay: `${
      
      (lettersBook2.length - index - 1) * 0.2}s`,
        }"
        :class="{ fadeOut: index !== 0 && isShowFade }"
      >
        <span class="left-panel">{
    
    {
    
     letter }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      lettersBook1: ["B", "o", "o", "k"],
      lettersBook2: ["1", "2", "o", "k"],
      isShowFade: false,
    };
  },
  mounted() {
    
    
    setTimeout(() => {
    
    
      this.isShowFade = true;
      let book1 = document.querySelector("#book1");
      book1.style.opacity = "0.4";
      let book2 = document.querySelector("#book2");
      book2.style.transform = "translateX(-58px)";
    }, 1000);
  },
};
</script>

<style>
.fadeOut {
    
    
  animation: fadeOut 0.5s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
    
    
  0% {
    
    
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    
    
    opacity: 0;
    transform: translateX(-45px);
  }
}
</style>

ps.其实可以优化一下，让后面的单词减少的时候就往前移动

扩展

css3动画

CSS3 3D转换之3D旋转 rotate非常简单粗暴的小猪佩奇图片旋转案例

animation.css使用

官网

安装&全局引入

npm install animate.css --save

//main.js中
import "animate.css";

接着就可以使用了。

注意点：

• 如果装了其他版本的animation.css，重装另一个版本后需要重启服务器生效。
• 目前最新的animation.css版本是4.1.1。vue2使用时，翻转Y存在一点问题。

补充

CSS3 动画w3cschool的css3动画基础理论学习
27 个前端动画库让你的交互更加炫酷很多库可以参考样式和写法~
css动画-animation各个属性详解写的很详细，也是比较基础的。

vue2 animatecss 简单使用（vue-cli) 入门教程，包括组合transition,有代码和效果，可以练习使用。
Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例 有效果有源码，看起来不错。