entry-animate

技术栈

• 1. Vue3.x 使用方法 使用 npm install entry-animate 进行安装, vue3 中 mian.js 中进行引入 使用

属性	作用
index	加快 diff 算法
speed	动画播放的速度

// main.js

import { createApp } from "vue";
import App from "./App.vue";
import entryList from "entry-animate";

const app = createApp(App);

app.use(entryList);
app.mount("#app");

// 使用的地方
<script setup>
import { reactive } from "vue";

const list = reactive([
  1, 2, 3, 4, 5, 7, 8, 7, 4, 5, 1, 2, 4, 4, 84, 2, 1, 2, 1, 2, 3, 4, 5, 7, 8, 7,
  4, 5, 1, 2, 4, 4, 84, 2, 1, 2, 1, 2, 3, 4, 5
]);
</script>

<template>
  <div class="list-contaienr">
    <div class="" v-for="(item, index) in list" :key="index" v-entry="index">
    {/* entry-list 使用entry-list 组件传入对应的循环的下标,支持 调整播放的速度 */}
      <entry-list :index="index">
        <div class="item">
          {{ item }}
        </div>
      </entry-list>
    </div>
  </div>
</template>

<style scoped>
.list-contaienr {
  text-align: center;
  width: 100%;
  background: #c0c7b5;
}

.item {
  background-color: #fff;
  margin-bottom: 10px;
}

.gradientAnimation {
  animation-name: gradient;
  animation-duration: 0.85s;
  animation-fill-mode: forwards;
  opacity: 0;
}

/* 不带前缀的放到最后 */
@keyframes gradient {
  0% {
    opacity: 0;
    transform: translate(-100px, 0px);
  }

  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
</style>

Keywords 入场动画