entry-animate
v1.0.4
Published
![image](https://github.com/zqhll/images/blob/main/动画.gif)
Downloads
2
Readme
entry-animate
技术栈
- 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 入场动画