Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >在ReactJS中通过动画改变元素的位置

问在ReactJS中通过动画改变元素的位置
EN

Stack Overflow用户

提问于 2021-03-04 09:31:05

回答 1查看 183关注 0票数 0

每当用户滚动到页面底部时，我都试图通过动画转换来更改我的幻灯片元素的位置。我遇到的问题是，我不知道如何将定位从flex切换到relative。slip元素需要位于页脚的上方。

我成功地实现了这一点，只切换类，但我不喜欢抽搐动画，所以我想添加一些过渡，但现在我不知道如何使它粘在页脚之上。

当用户滚动到页面底部时，我如何使幻灯片元素粘在页脚的顶部，而不是固定的？目标是通过平稳的过渡/动画来实现这一点。

这是我的堆栈闪电战问题的例子。

云点播特惠1元起

提供制作上传、存储、转码、媒体处理、媒体 AI、加速分发播放、版权保护等一体化的高品质媒体服务

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-04 09:58:53

这并不是一个真正的ReactJS问题，它更多的是一个关于HTML和CSS样式的问题。

我会得到页脚：footer.offsetTop的位置，然后我可以得到用户的滚动位置：window.scrollY和窗口高度：window.innerHeight。使用所有这些值，我将确定用户是否已滚动到可以看到页脚的位置，如果是，则使打滑元素在bottom设置为footer.offsetTop的位置上具有绝对位置。

从理论上讲，这是可行的。

实际上，我发现了一个堆栈溢出问题，仅仅是为了确定是否将一个元素滚动到视图中：如何在滚动后检查元素是否可见？，因此这会对一些人有所帮助。

票数 1

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66480100

复制

相关文章

vue中通过移入移出来改变元素样式的方法

vue.js javascript element ui

以下场景中用的是elementUI中的 el-table 。当鼠标移入当行的群成员数量的时候，数字变蓝色，移出恢复默认颜色

xyzzz

2020/11/26

2.2K0

vue中通过移入移出来改变元素样式的方法

getBoundingClientRect方法获取元素在页面中的相对位置

获取元素位置可以用 offset 或 getBoundingClientRect，使用 offset 因为兼容性不好，比较麻烦，offset获取位置会形成“回溯”。而 getBoundingClientRect 方法则兼容性较好，基本所有的浏览器都支持了，且使用起来更容易和简单。

用户6167509

2019/09/04

3.9K0

元素的动画

html transform width 动画函数

转换（transform），也称变形。就是改变元素在页面中的位置，大小，角度以及形状。

云叶知秋

2023/10/16

1490

在ReactJS体验ES6中的class类

面向对象编程

你也可以使用类表达式定义类。但是不同于类表达式，类声明不允许再次声明已经存在的类，否则将会抛出一个类型错误。

JavaEdge

2021/03/15

1.8K0

在JS数组指定位置插入元素

编程算法 javascript

一、JavaScript splice() 方法 splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

用户7741497

2022/03/06

6.2K0

JavaScript 获取鼠标及元素在页面上的位置

HTML5学堂：JavaScript获取鼠标的位置，大家会想到clientX/Y等属性，灵活的获取鼠标的位置信息，能够便于我们实现各种复杂的页面交互效果，到底还有哪些属性可以获取鼠标的位置信息？另外，还有哪些能快速获取标签在页面中的位置信息？在书写一些“拖拽”页面交互效果，比如常见的拖拽效果、自定滚动条、放大镜等效果，都需要用到了鼠标或元素在页面上的位置信息。为了能够快速、灵活的获取鼠标位置信息，今天要带着大家来接触的不是利用clientX/Y获取鼠标的位置信息，而是利用了大家可能比较少用的两个属性lay

HTML5学堂

2018/03/13

3.5K0

JavaScript 获取鼠标及元素在页面上的位置

改变视图的位置和大小

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/53068421

用户1451823

2018/09/13

1.2K0

CSS元素位置的互换

flex header reverse row table

方法一使用Order属性设置弹性盒对象元素的顺序。示例：将3个元素按倒序显示 flex-direction: 值描述 row（默认值）主轴为水平方向，起点在左端。 row-reverse 主轴为水平方向，起点在右端。 column 主轴为垂直方向，起点在上沿。 column-reverse 主轴为垂直方向，起点在下沿。 .container { display: flex; flex-direction: column; } .container .fi

十玖八柒

2022/08/01

2.4K0

商品添加到购物车动画getBoundingClientRect获取元素位置

3. IE67的left、top会少2px,并且没有width、height属性。

javascript.shop

2019/09/04

1.7K0

商品添加到购物车动画getBoundingClientRect获取元素位置

jquery操作元素的位置

jquery html nat

.offset() 　　在匹配的元素中，获取第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档。　　.offset() 这个不接受任何参数。　　　　var offset = p.offset(); //获取到这个元素的位置　　　　　　p.html( "left: " + offset.left + ", top: " + offset.top ); .offset.left 元素距左面的距离 .offset

用户1197315

2018/01/19

3.4K0

使用R语言在向量的任何位置插入任何元素

数据挖掘 geo image

然后学员有任意需求，任意位置添加任意数字，这样写会比较麻烦，每次都有手动判断向量长度，范围等等，因为她是初学者，所以不可能会无限R包和函数，我这里简单演示一下：

生信技能树

2019/11/06

6.9K0

使用R语言在向量的任何位置插入任何元素

<script>元素在XHTML中的用法

　　编写XHTML代码的规则要比编写HTML严格得多，例如如下代码： 1 <script type="text/javascript"> 2 function compare(a, b){ 3 if(a < b) { 4 alert("A is less than B"); 5 } else if(a > b){ 6 alert("A is greater than B"); 7 } els

就只是小茗

2018/03/07

2.5K0

查找数组元素位置

一个js练习题题目描述找出元素 item 在给定数组 arr 中的位置输出描述: 如果数组中存在 item，则返回元素在数组中的位置，否则返回 -1 输入例子: indexOf([ 1, 2, 3, 4 ], 3) 输出例子: 2 代码如下： function indexOf(arr, item) { var len = arr.length,flag=0; for( var i =0; i<len;i++) { if(arr[i]==ite

用户1749219

2018/05/16

2.2K0

拖动图片改变位置

在线展示：https://gethtml.cn/project/2020/04/14/index.html

Dreamy.TZK

2020/04/16

6.7K1

改变数组元素

Original link 思想：前缀和与差分。对于 a[i] 的操作，构建差分数组 b[i] 记录被操作的区间。利用前缀和可知所有被操作的区间，即 b[i] != 0 的区间。代码： #include <bits/stdc++.h> using namespace std; const int N = 1e6 + 3; int a[N], b[N]; void solve(){ int n; cin >> n; for(int i = 1; i <= n; i ++){

浪漫主义狗

2023/02/21

5980

（五）元素的切换动画

css html absolute dom grid

在多个 html 原生原生元素之间切换动画一、在多个dom 元素之间切换动画相关信息 <template> <main> <div class="container"> <Transition name="fade">  <!-- <div v-if="box === 'box1'" class="box box1"></div> <div v-else-if="box === 'box2'

老怪兽

2023/02/22

7300

java列表删除指定位置元素_怎么删除数组中的某个元素

网站编程算法 java https 网络安全

1. 因为数组长度在初始化的时候是指定的并且不可变的，所以不能在原有的数组上直接进行删除操作，需要新建一个长度为当前长度减1的数组

全栈程序员站长

2022/09/22

5.4K0

位置编码在注意机制中的作用

机器学习神经网络深度学习人工智能

A. Vaswani等人的《Attention Is All You Need》被认为是解决了众所周知的LSTM/RNN体系结构在深度学习空间中的局限性的突破之一。本文介绍了transformers 在seq2seq任务中的应用。该论文巧妙地利用了 D.Bahdanau 等人通过联合学习对齐和翻译的神经机器翻译注意机制的使用。并且提供一些示例明确且详尽地解释了注意力机制的数学和应用。

zenRRan

2021/06/17

2K0

Qt-改变tabBar位置并改变文字方向

QTabWidget默认tab页标题（tabBar）在上面，但是有时候我们需要改变它的位置，比如做一个设置页面，想将它放到左边显示，这个比较简单，只需要设置一个属性即可实现：tabPosition:west，但是我们发现它文字的方向是没有改变的，这样完全没有使用体验，所以我们需要改变文字的方向。

kdyonly

2023/03/03

3.3K0

Qt-改变tabBar位置并改变文字方向

【Java入门】交换数组中两个元素的位置

java 编程软件开发

在Java中，交换数组中的两个元素是基本的数组操作。下面我们将详细介绍如何实现这一操作，以及在实际应用中这种技术的重要性。

努力的阿飞

2023/09/14

3670

相似问题

如何在ReactJs中动态改变元素的位置？

20

改变位置的角度动画元素？

10

TweenLite动画突然改变了元素的位置？

13

如何用动画改变元素CSS的位置

45

改变元素在linkedList中的位置

22

活动推荐

国内短信福利大放送，不要错过！

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例