问题标签 [layouttransition]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
532 浏览

android - LayoutTransition 高度为 0 导致视图在没有动画的情况下立即消失

给定一个始终对齐父底部的视图,最初高度为 0,我想对其进行动画处理,使其向上滑动到WRAP_CONTENT. 我正在使用布局转换来实现这一点:

viewGroup父母在哪里viewToAnimate并且有animateLayoutChange=true

逻辑是:

这在视图展开时效果很好;视图很好地从底部向上滑动到其高度。但是,当高度设置为 0 时,视图会简单地消失并且不会滑入。viewToAnimate是与 some 的相对布局TextViews,没有什么复杂的。任何建议,将不胜感激。

视频展示效果(注意文字没有下滑,只是消失了):https ://www.dropbox.com/s/1pq7yh0bqx8ghif/2017_10_06_23_17_11.mp4?dl=0

查看动画:

0 投票
0 回答
32 浏览

java - 将一个视图移动到另一个视图的动画

我正在尝试将一个带有动画的视图移动到另一个视图,但到目前为止没有任何效果。我在RelativeLayout中有两个视图,一个视图应替换另一个视图,如下所示:我尝试了它,但它不起作用:

view_screenshot_image

0 投票
1 回答
881 浏览

reactjs - framer-motion layoutTransition 在 React 中确实有效,但在 NextJS 中无效

我正在尝试将我的头包裹起来framer-motion,这是一个非常好的动画库,我正在尝试与 NextJS 结合使用。我关注了一个 CSS 技巧 youtube 视频,该视频layoutTransition使用此沙箱进行了解释: https ://codesandbox.io/s/framer-motion-css-tricks-template-3-07wkh?fontsize=14&module=/src/Image.tsx&file=/ src/Image.tsx:0-783

渴望尝试一下,我复制到我的 NextJs 项目中,但我无法让它工作。我剥离了所有东西以使其更加干净,最终得到了这些沙箱:一个是 React,另一个是 NExtJS。对我来说,它们是相同的,但是使用的图像缩放layoutTransition似乎在我的 NextJS 沙箱中不起作用,为什么?

https://codesandbox.io/s/framer-motion-image-zoom-forked-774up https://codesandbox.io/s/currying-haze-wii0m

0 投票
1 回答
77 浏览

android - 从回收视图中删除项目时如何设置 layoutTransition 以正确设置动画

我希望在从列表中删除项目之后发生转换,但是当我删除项目时,转换发生得更早,并且它涵盖了其他项目,如下面的 GIF 所示。我的第二个问题是,当我使用 layoutTransition 时,创建片段时它会随着动画展开,如何在一开始就避免这种情况。我的布局是这样的:

并在片段中:(Kotlin):

但没有任何改变,总是相同的行为

例子

0 投票
0 回答
42 浏览

android - MotionLayout中TextView如何实现AnimateLayoutChanges LayoutTransition.CHANGING效果

显然MotionLayout不适用于自动 Android LayoutTransition 框架animateLayoutChanges,所以我想知道如何在LayoutTransition.CHANGING没有它的情况下获得效果。AnimateLayoutChanges 通过自动为视图上的内容和大小更改设置动画。这是一个例子。

在此处输入图像描述

不幸的是,MotionLayout 不支持更改 TextView 文本,尤其是不支持像图像显示的那样为 TextView 内的文本设置动画。任何帮助是极大的赞赏。

0 投票
0 回答
54 浏览

android-animation - 使用 Jetpack Compose 显示对话框时如何实现一个 Composable 在另一个之上的分层效果

我希望了解在当前可组合视图顶部显示对话框时如何在 Android 中使用 Jetpack Compose 实现此行为。

期望状态:

在此处输入图像描述

单击底部的过滤器按钮时的动画。这是来自 iOS 上的应用程序文化之旅。

在此处输入图像描述

我目前有一个如下所示的对话框。如果您注意到,我的内容仍然可见,但我想让它看起来好像是背景中的页面层。

注意所需状态图中的红色箭头。我可以通过设置一行并使用填充设置背景颜色来模仿这种行为,但寻找更优雅的解决方案或想知道是否存在我不知道的标准行为。

实际状态:

在此处输入图像描述