本文介绍了如何在Vue中封装动画插件以实现渐隐渐现效果，主要探讨了两种方法：一是利用Velocity.js库，二是采用原生JavaScript编写动画。在Velocity.js方案中，需要注意引入必要的库文件并定制动画钩子。而在使用原生js时，确保动画执行的异步性至关重要，避免因早于动画完成而销毁组件。
通过js封装的Vue渐隐渐现效果大体两种方法：1、通过Velocity.js 2、原生js写动画
1、通过Velocity.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>list transition</title>
<script src="./vue.js"></script>
<script src="./velocity.min.js"></script>
</head>
<body>
<div id="app">
<fade :show="show">
<div>woshi content</div>
</fade>
<button @click="handleBtnClick">qiehunbhzuan</button>
</div>
<script>
Vue.component('fade', {
props: ['
最低0.47元/天 解锁文章
扫一扫
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
