使用transition-group实现点击上下移动div的效果

已于 2022-04-20 09:25:53 修改
阅读量524 收藏
点赞数 1
分类专栏： 前端 文章标签： vue.js 前端
于 2022-04-19 18:03:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41821445/article/details/124278909
版权

首先使用transition-group时有一点要注意，就是key必须填写唯一且稳定的值，不能为数组的索引，下面图片是html部分
在这里插入图片描述
点击事件的方法如下图，该方法是通过splice去改变数组的排序
在这里插入图片描述
最终效果如下
在这里插入图片描述

明天依然是晴天~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue2.0 中使用transition实现动画效果使用心得
10-18
主要介绍了vue2.0 中使用transition实现动画效果使用心得，本文通过案例知识给大家介绍的非常详细，需要的朋友参考下吧
transition-app:更改div元素
03-21
在实际项目中，我们可能还会遇到`transition-group`这样的概念，它通常用于处理多个元素的过渡，比如在一个列表中添加、删除或移动元素时，确保它们的过渡效果能够正确同步。 为了进一步了解`transition-app`的具体...
Vue中实现文字向上滚动的动画效果
热门推荐
多啦的博客
06-27 4万+
在Vue中实现文字向上滚动的效果
css之选择器、无需改变html结构的自定义校验标识符星号、输入框聚焦修改父元素样式、设置已选择的文字样式、首字符下沉、focus-within、first-letter、selection、has
最新发布
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
06-12 1100
css之选择器、无需改变html结构的自定义校验标识符星号、输入框聚焦修改父元素样式、设置已选择的文字样式、首字符下沉、focus-within、first-letter、selection、has
Vue原生无缝上下滚动组件transition-group使用心得
zbwroom的博客
08-20 9361
首先我们先看看效果 其次我们开始造数据 let nameList = [ '电风**啦', '你***包', '十二****就', '高****爸', '南城旧****梦', '别理我理我****我', '诺****曦', '悲欢****女', '一枫****书', '尹雨****沫', '呆橘****橘', '困****倦', ]; let prizeList...
Vue ＜transition-group＞ 多组table滚动显示数据 过渡效果案例2
zbailing的博客
03-10 1486
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue <transition-group> 多组table滚动显示数据 过渡效果案例2</title> <!-- 上篇文章的代码，实际使用中发现有bug 比如：如果文本过长，有需要折行的文本，在滚动时，会因为positio...
第三十三篇 transition-group 列表过渡
灵魂学者的博客
11-19 2198
本篇内容记录的是 列表过渡的一个使用和场景以及所遇到的问题，以及再一次的涉及key的设置，了解Vue中虚拟DOM的一个diff，transition和transition-group提供的一个解决动画的方案，transition能够渲染一个真实DOM而transition-group默认是一个span标签，可以通过tag特性转换元素使用；
transtion-group过渡列表，移动过渡列表，状态过渡
weixin_39838846的博客
07-29 271
transtion-group过渡列表，移动过渡列表，状态过渡
【JavaScript源代码】vue实现页面div盒子拖拽排序功能.docx
12-29
总结来说，Vue.js中使用CSS3的`transition-group`实现div元素的拖拽排序，主要涉及以下步骤： 1. 使用`<transition-group>`组件包装可拖动的div元素，并绑定拖放事件。 2. 在`data`中存储拖放过程中的必要信息。 3. ...
vue实现div拖拽互换位置
10-17
主要为大家详细介绍了vue实现div拖拽互换位置的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue运用transition实现过渡动画
11-29
在描述中提到的例子中，`<transition>`标签用于包裹需要进行过渡效果的`<div>`元素。`name`属性是必需的，它定义了过渡的名称，该名称需与CSS类名匹配，以便在动画过程中应用相应的样式。 CSS过渡效果通常由`...
vue3 transition-group详解
wxid_mtnujb6ipc0322的博客
10-17 2171
transition和animate组件库结合为Vue应用添加出色的过渡效果，提升用户体验。无论是创建任务列表、图片轮播还是其他场景，transition-group都是一个必备的工具。
Vue中使用transition或transition-group标签实现动画效果
weixin_42077503的博客
05-27 2526
效果图: html:appear属性是关键，他会让页面在刷新时就开启动画 <transition-group name="slide" tag="ul" class="list-wrapper" appear> <li class="list" v-for="(item) in lists" :key="item"> <span class="text">{{item}}</span> </li> <
vue 实现页面div盒子拖拽排序功能
bug爱好者的博客
10-21 898
前言：目前市面上有很多实现拖拽排序功能的插件和方法，本节不过多累述，只讲一种：css3的transition-group方法 效果图： 1. DOM中使用： <transition-group class="container" name="sort"> <div class="app-item" v-for="app in customApps" :key="app.id" :draggable="true" @dragsta.
vue 多组件之间拖拽排序
m0_37653407的博客
04-16 382
vue 多组件之间拖拽排序 // 这样，就实现了既能上下列内拖拽，又能左右跨列拖拽 <template> <div> <vuedraggable class="left" v-model="list1" group="people" :options="dragOptions"> <transition-group tag="div"> <div v-for="item in list1" :key="item
前端实现鼠标拖拽功能
qq_40407998的博客
06-09 4734
1.实现拖拽 页面： <div @mousedown="move" style="position: relative; "> 待拖动div </div> 实现方法： move(e){ let odiv = e.currentTarget ; //获取目标元素 //算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetL
transition-group 使用
栗子的成长ing
12-16 2万+
本篇主要是记录transition-group的使用心得。 官方文档：https://cn.vuejs.org/v2/guide/transitions.html#%E5%88%97%E8%A1%A8%E8%BF%87%E6%B8%A1 transition-group用于列表的过渡效果。 默认为span, 可以使用tag 转换为其他元素。 子元素通常使用v-for进行循环。 子元素必须...
使用 transition-group 元素实现列表动画
weixin_34186931的博客
02-28 166
<!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-Com...
Vue ＜transition-group＞ table滚动显示数据 过渡效果案例(vue.js版)
zbailing的博客
03-04 634
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue <transition-group> table滚动显示数据 过渡效果案例</title> <style> .list-complete-item { transition: all 1s;...
使用 react-transition-group实现react路由动画实现后为什么出现两个
05-23
首先，确保你已经正确引入了 `react-transition-group` 库，并且按照官方文档中的方式使用了 `TransitionGroup` 和 `CSSTransition` 组件。 然后，你需要注意以下几点： 1. 确保你的路由组件都被包裹在 `CSS...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值