使用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`的具体...
transtion-group过渡列表，移动过渡列表，状态过渡
weixin_39838846的博客
07-29 271
transtion-group过渡列表，移动过渡列表，状态过渡
css之选择器、无需改变html结构的自定义校验标识符星号、输入框聚焦修改父元素样式、设置已选择的文字样式、首字符下沉、focus-within、first-letter、selection、has
最新发布
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
06-12 1100
css之选择器、无需改变html结构的自定义校验标识符星号、输入框聚焦修改父元素样式、设置已选择的文字样式、首字符下沉、focus-within、first-letter、selection、has
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;...
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...
css3动画特效：上下晃动的div
cxu123321的博客
03-27 1707
css3动画特效：上下晃动的div <div id="square" class="container animated">上下晃动</div> /** * transform-origin 设置旋转元素的基点位置 * animation-name 设置动画名称 * animation-duration 设置动画时间 * animation-fi...
【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过渡效果通常由`...
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.
transition-group标签实现列表过渡动画
qq_42418169的博客
08-29 2338
文章目录为什么需要transition-group语法没有出场动画与有出场动画比较 为什么需要transition-group 因为我们有时不只是需要单个元素动画，有时需要一整个列表都附带动画 transition标签实现不了列表的群组动画，于是此时就有了transition-group 语法 appear :用来指定是否在出场时用渲染动画 tag:用来指定transition-group标签渲染后的默认标签，不指定，transition-group默认被渲染成span transition-grou
使用 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...
transition-group实现列表动画 （增加、删除）
youguang_的博客
03-08 2157
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" href="anima
Vue中实现文字向上滚动的动画效果
热门推荐
多啦的博客
06-27 4万+
在Vue中实现文字向上滚动的效果
vue3 transition-group详解
wxid_mtnujb6ipc0322的博客
10-17 2177
transition和animate组件库结合为Vue应用添加出色的过渡效果，提升用户体验。无论是创建任务列表、图片轮播还是其他场景，transition-group都是一个必备的工具。
第三十三篇 transition-group 列表过渡
灵魂学者的博客
11-19 2198
本篇内容记录的是 列表过渡的一个使用和场景以及所遇到的问题，以及再一次的涉及key的设置，了解Vue中虚拟DOM的一个diff，transition和transition-group提供的一个解决动画的方案，transition能够渲染一个真实DOM而transition-group默认是一个span标签，可以通过tag特性转换元素使用；
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> <
使用 react-transition-group实现react路由动画实现后为什么出现两个
05-23
可能是因为你没有正确配置 `react-transition-group`。 首先，确保你已经正确引入了 `react-transition-group` 库，并且按照官方文档中的方式使用了 `TransitionGroup` 和 `CSSTransition` 组件。 然后，你需要注意以下几点： 1. 确保你的路由组件都被包裹在 `CSSTransition` 组件中，并设置 `classNames` 属性来指定动画类名。 2. 确保你的路由组件都有唯一的 `key` 属性，这个属性在路由切换时会被用到。 3. 如果你在使用 `Switch` 组件来渲染路由，注意把 `Switch` 组件放在 `TransitionGroup` 组件的内部。 如果你已经按照以上步骤进行了配置，但是仍然出现了两个动画的问题，可能是因为你的路由组件存在嵌套关系，这时候需要在父级路由组件上设置 `appear={true}` 和 `unmountOnExit={true}` 属性来避免出现重复动画。 希望这些信息能够帮助你解决问题。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值