vue實現(xiàn)動態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動畫
更新時間：2022年04月09日 09:44:17 作者：zhooson
這篇文章主要介紹了vue實現(xiàn)動態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動畫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
動態(tài)列表尾部添加數(shù)據(jù)執(zhí)行動畫
先上動畫
- 動態(tài)控制節(jié)點數(shù)量（目前只顯示6個節(jié)點）
- 尾部添加幾個item，頭部則刪除幾個item
- 觸發(fā) transition-group 動畫
- splice 的使用方法
代碼：
<style lang="scss">
.content {
? display: flex;
? width: 600px;
? height: 50px;
? margin: 100px auto;
}
.list-complete-item {
? transition: all 1s;
? display: inline-block;
? width: 100px;
? text-align: center;
? line-height: 50px;
? font-size: 18px;
}
.list-complete-enter,
.list-complete-leave-to {
? opacity: 0;
? transform: translateX(-30px);
}
.list-complete-leave-active {
? position: absolute;
}
</style><template>
? <div class="vueBox">
? ? <transition-group class="content" name="list-complete" tag="div">
? ? ? <span
? ? ? ? v-for="item in list"
? ? ? ? v-bind:key="item.value"
? ? ? ? class="list-complete-item"
? ? ? >
? ? ? ? {{ item.name }}
? ? ? </span>
? ? </transition-group>
? </div>
</template><script>
export default {
? name: "slideanimation",
? data() {
? ? return {
? ? ? list: [
? ? ? ? {
? ? ? ? ? name: "蘋果",
? ? ? ? ? value: "1.68",
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: "橘子",
? ? ? ? ? value: "0.9",
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: "香蕉",
? ? ? ? ? value: "2.58",
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: "獼猴桃",
? ? ? ? ? value: "3.2",
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: "靈夢",
? ? ? ? ? value: "1.2",
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: "李子",
? ? ? ? ? value: "13.2",
? ? ? ? },
? ? ? ],
? ? };
? },
? mounted() {
? ? // 定時模擬的socket的 推送數(shù)據(jù)， 需求： 頁面只顯示6個節(jié)點，推送幾個新的數(shù)據(jù)，則刪除頭部幾個數(shù)組。
? ? setInterval(() => {
? ? ? this.animation();
? ? }, 3000);
? },
? methods: {
? ? // 生成指定 隨機范圍的 整數(shù)
? ? randomNum(minNum, maxNum) {
? ? ? switch (arguments.length) {
? ? ? ? case 1:
? ? ? ? ? return parseInt(Math.random() * minNum + 1, 10);
? ? ? ? ? break;
? ? ? ? case 2:
? ? ? ? ? return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
? ? ? ? ? break;
? ? ? ? default:
? ? ? ? ? return 0;
? ? ? ? ? break;
? ? ? }
? ? },
? ? animation() {
? ? ? let newItems = [...this.list];
? ? ? // 來一波隨機個數(shù)，隨機數(shù)組
? ? ? let randomCount = 1,
? ? ? ? addItems = [];
? ? ? randomCount = this.randomNum(1, 3);
? ? ? console.info("生成隨機數(shù) - 尾部添加 - 頭部刪除", randomCount);
? ? ? Array.from(new Array(randomCount), (n, i) => i).forEach(() =>
? ? ? ? addItems.push({
? ? ? ? ? name: (Math.random(0, 1) * 1000).toFixed(0),
? ? ? ? ? value: Math.random(0, 1),
? ? ? ? })
? ? ? );
? ? ? // 刪除 數(shù)組 頭部 幾個item
? ? ? newItems.splice(0, randomCount);
? ? ? // 數(shù)組 尾部 添加 幾個item
? ? ? newItems.splice(newItems.length, 0, ...addItems);
? ? ? // 觸發(fā) transition-group 動畫
? ? ? this.list = [...newItems];
? ? },
? },
};
</script>動態(tài)數(shù)據(jù)使用wowjs顯示動畫
1.通過npm安裝
npm install wowjs --save-dev
animate.css會自動安裝。
2.在main.js中引入animate.css
import 'wowjs/css/libs/animate.css
在組件需要的地方引入wowjs
有兩種使用方式：
第一種：
import {WOW} from 'wowjs' ??
? ? mounted() {
? ? ? new WOW().init()
? ? }第二種：
import WOW from 'wowjs' ??
? mounted() {
? ? ?new WOW.WOW().init()
? ?}wow實例化里面的配置參數(shù)
自己選擇性添加配置參數(shù)
infinite無限次播放
如過添加動畫的元素渲染數(shù)據(jù)是請求接口渲染的 那么實例化wow一定得在接口請求結(jié)束之后使用this.$nextTick()在這個函數(shù)里面執(zhí)行
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue+elementUI實現(xiàn)動態(tài)展示列表的數(shù)據(jù)
- vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實現(xiàn)
- vue如何從后臺獲取數(shù)據(jù)生成動態(tài)菜單列表
- Vue3 列表界面數(shù)據(jù)展示詳情
- 使用Vue3進行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)
- vue列表數(shù)據(jù)刪除后主動刷新頁面及刷新方法詳解
- vue2.0實現(xiàn)列表數(shù)據(jù)增加和刪除
- Vue如何獲取數(shù)據(jù)列表展示
- vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示
- vue父列表數(shù)據(jù)獲取子列表數(shù)據(jù)的實現(xiàn)步驟
相關(guān)文章
基于vue+uniapp直播項目實現(xiàn)uni-app仿抖音/陌陌直播室功能
uni-liveShow是一個基于vue+uni-app技術(shù)開發(fā)的集小視頻/IM聊天/直播等功能于一體的微直播項目。本文通過實例圖文的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-11-11
這篇文章主要介紹了vant中field組件label屬性兩端對齊問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue中使用iview自定義驗證關(guān)鍵詞輸入框問題及解決方法
這篇文章主要介紹了vue中使用iview自定義驗證關(guān)鍵詞輸入框問題及解決方法，本文通過實例結(jié)合代碼的形式給大家介紹解決方法,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vuex實現(xiàn)及簡略解析(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue中v-model雙向綁定input輸入框問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue中怎樣實現(xiàn)彈出層動畫效果，由上而下漸漸顯示，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-09-09
這篇文章主要介紹了vue2.x 對象劫持的原理實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
vue3.0項目小白填坑之vue3.0+vite獲取環(huán)境變量
Vue3項目使用vite作為打包工具時,環(huán)境變量可以保存在.env文件中,在build時進行解析,這篇文章主要給大家介紹了關(guān)于vue3.0項目小白填坑之vue3.0+vite獲取環(huán)境變量的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue中定義src在img標簽使用時加載不出來的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
在vue.js渲染完界面之后如何再調(diào)用函數(shù)
這篇文章主要介紹了在vue.js渲染完界面之后如何再調(diào)用函數(shù)的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07