在vue中使用velocity动画库实现列表交错过渡

这个消息通知组件，我点击清空通知后，想要清除里面的信息，如果直接清空是下面这样的：

可以看出这样会显得非常生硬，再来看加上过渡之后的：

是不是感觉不一样了，这实际上是用velocity动画库实现的：

首先npm安装Velocity

npm i velocity-animate

在main中引入velocity-animate就可以了

import Velocity from 'velocity-animate'
Vue.prototype.Velocity = Velocity

这是我根据vue官网中的例子修改的

<template><div id="app"><button @click="show = !show">{{ btnText }}</button><transition-group name="staggered-fade" tag="ul" v-bind:css="false" v-on:before-enter="beforeEnter"v-on:enter="enter" v-on:leave="leave"><li class="app-li" v-show="show" v-for="(item, index) in list" :key="item.id" :data-index="index">{{ item.msg }}</li></transition-group></div>
</template>
<script>
export default {data() {return {show: true,btnText: "退出过渡",list: [{ id: '01', msg: 'Bruce Lee' },{ id: '02', msg: 'Jackie Chan' },{ id: '03', msg: 'Chuck Norris' },{ id: '04', msg: 'Jet Li' },{ id: '05', msg: 'Kung Fury' }]}},methods: {//过渡初始参数beforeEnter: function (el) {el.style.opacity = 0el.style.height = 0},//进入过渡动画enter: function (el, done) {var delay = el.dataset.index * 150this.btnText = "退出过渡"setTimeout(function () {Velocity(el,{ opacity: 1, height: '30px' },//注意这里高度要跟你li高度一样{ complete: done })}, delay)},//离开过渡动画leave: function (el, done) {var delay = el.dataset.index * 150this.btnText = "进入过渡"setTimeout(function () {Velocity(el,{ opacity: 0, height: 0 },{ complete: done })}, delay)}}
}
</script>
<style>
.app-li {list-style: none;width: 200px;height: 30px;border: 1px solid #333;
}
</style>
``

在vue中使用velocity动画库实现列表交错过渡相关推荐

ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
VUE 常用炫酷动画库（拿来即用系列）
目录打字机效果Vue动画库代码示例效果炫酷背景动画库代码示例效果打字机效果Vue动画库 npm install vue-typical 代码示例 <template>< ...
在vue中使用flexible---移动端适配
在vue中使用flexible-移动端适配配置 flexible 安装 lib-flexible 在命令行中运行如下安装: npm i lib-flexible --save 引入 lib-flex ...
后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)
一.antd vue中的a-select的动态加载列表a-select-option 1.既然是动态加载选择框的列表a-select-option,必然存在获取后台数组,并循环后台数组格式: 数组( ...
vue 使用animate.css动画库
vue 2示例 `先下载` `在 main.js中将Animate.css库导入到您的项目中,即在其中添加如下代码`==(切记两个都要引入不然没有效果下面的css是自己封装的动画时间效果之类的)= ...
vue 中横向滚动设置scrollLeft，并且加上过渡动画
图一图二如图一所示,需求是比如在点击第四个选项时,会自动移至前方,并显示出下一个选项,到图二效果由于scrollLeft 不是css中的属性,所以用css无法解决思路: 将需要移动的距离均分, ...
vue的列表交错过渡
参考文章 https://juejin.im/post/5cccf5b0e51d453a907b4af1 转载于:https://www.cnblogs.com/1032473245jing/p/10 ...
React-Spring动画库快速入门
一.动画可以赋予组件生命,增加用户视觉交互体验 Someone said - "Animations give life to the UI components" 二.react ...
安装使用Animate动画库【Animate.css下载安装教程】
Animate.css官网地址 1.npm安装Animate.css npm install animate.css --save 2.在入口文件main.js中导入 // 导入动画库 import ...

在vue中使用velocity动画库实现列表交错过渡

这个消息通知组件，我点击清空通知后，想要清除里面的信息，如果直接清空是下面这样的：

可以看出这样会显得非常生硬，再来看加上过渡之后的：

是不是感觉不一样了，这实际上是用velocity动画库实现的：

在vue中使用velocity动画库实现列表交错过渡相关推荐

最新文章

热门文章