问题标签 [transitions]

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 投票
1 回答
1505 浏览

silverlight - 在视觉状态之间进行动画处理,而不会出现特定过渡的爆炸式增长

我有一个似乎相当简单的场景,我试图在 Silverlight 中实现,但是尽管 Silverlight/Blend 4 中的所有令人难以置信的强大转换功能,我只是不知道如何去做。

我有一个布局可以归结为:

起初,所有四个页面网格都被隐藏并缩放到零大小,但是当您单击其相应的按钮时,页面应该会出现一个增长的动画。当您单击另一个按钮时,前一页应以缩小的动画消失,而另一页应以增长的动画出现。这样,您可以使用按钮在所有四个页面之间切换。

从我读过的内容来看,执行此操作的“正确”方法是在用户控件上使用视觉状态。所以我创建了四个状态,Page1 到 Page4,并为每个状态设置适当的页面网格来显示。然后我将命令放在按钮上以更改用户控件的视觉状态。这很好用,我可以在页面之间切换,但是当我开始尝试定义状态之间的动画时,我遇到了问题。

起初,我以为我可以为每个状态定义一个“To *”和“From *”动画。因此,当您处于 Page1 状态并单击按钮转到状态 Page2 时,它会播放“From *”动画隐藏 Page1,然后播放“To *”动画显示 Page2。但这不起作用。即使您为每个状态定义了“To *”和“From *”动画,Silverlight 也只会播放“To *”动画,而完全忽略“From *”动画!

更糟糕的是,这种行为似乎是 Silverlight 的工作方式,尽管它根本没有任何意义!这意味着如果我想让每个页面缩小,然后另一个页面在其位置增长,我将必须定义从每个状态到另一个状态的单独转换!对于我目前的四页,这意味着十二个单独的过渡,但是当我想增加页数时,这个数字会猛增。十页需要 9*9 = 81 次转换!一切都是为了缩小当前页面,并扩大新页面。

我不敢相信没有更好的方法来处理看似如此简单的场景,但我找不到任何东西似乎可以说明如何。我可能可以使用修改故事板的代码隐藏将它一起破解,但我希望允许在 Blend 中查看和编辑页面网格,而且我读到的所有内容都说要避免使用代码隐藏并使用视图模型和视觉状态来处理事情

请告诉我我遗漏了一些明显的东西?

0 投票
1 回答
451 浏览

silverlight - 如何用过渡替换 Silverlight/WP7 中的当前控件?

我有一个有两个控件的 Wp7。一个是地图,另一个是全景控件。全景项目之一是值列表。如果用户单击列表项,我想显示旋转门转换到显示更多细节的新控件。

到目前为止,在 XAML 中,我有一个绑定到 LeftMouseUp 的事件,它会触发。但是,我现在确定如何用新控件(视图)替换当前的全景项目,或者如何在两者之间使用 silverlight 工具包提供的 TurnstileTransition。

0 投票
1 回答
6008 浏览

webkit - Safari -webkit-transition-property:动画比例和/或背景大小

我想用背景图像为几个 div 设置动画。我希望他们在页面上移动位置并变大。

我通过 jQuery 添加一个类来执行此操作,该类反过来会触发 Webbit 的 CSS3 转换。

我从这个开始:

添加该样式时,DIV 会更改宽度和高度,移动到新的顶部位置,但背景大小保持不变。

所以我尝试了这个:

但是,同样的问题。顶级动画,但不是规模。

我认为(希望)这只是我的一个语法错误。还是不能转换 -webkit 属性?

0 投票
1 回答
569 浏览

jquery-plugins - jQuery 循环插件:让寻呼机在混合内容幻灯片 div 中转换

我一直在尝试 Malsup 很棒的 jQuery 循环插件,但遇到了一些问题。我一直在我的过渡 div 中使用混合内容,效果很好。当我在转换 div 中使用寻呼机时会出现问题。本质上,我希望寻呼机链接与每个 div 一起转换,因此我将寻呼机 div 包含在每个转换 div 中。

$(document).ready(function() { $('#slider').cycle ({ fx: 'scrollLeft', timeout: 10000, speed: 500, pager: '#pager' }); }); 图像文本文本文本立即尝试!条款和条件应用

寻呼机在第一张幻灯片上显示良好,并且完全按照我想要的方式过渡,尽管我在前两个寻呼机 div 中放入的测试字母确实出现在以下三个过渡中,但它没有出现。我在这里想念什么?

0 投票
1 回答
525 浏览

c# - 使用 Silverlight 中的行为管理屏幕过渡

我的应用程序根视觉是一个始终保持固定的边框面板。改变的是边框面板的子项:我制作了几个屏幕(UserControl),并希望在单击每个屏幕中的某些按钮时在它们之间切换。

我希望屏幕之间的过渡具有视觉吸引力,以便每个屏幕都有两个 StoryBoard ,一个用于滑入动画,一个用于滑出动画。(为了更清楚,例如screen1动画中的幻灯片,会将screen1的按钮和字段以特定方式移动到视图区域,直到它们到达最终位置)。

我的目标是使用 Behavior 实现这些屏幕转换,并将它们应用到代码尽可能少的屏幕上(最好只使用 XAML)。

首先,我定义了一个新界面,我的所有应用程序屏幕都将实现它:

然后 screen1 后面的代码将如下所示:

AnimationOut 和 AnimationIn 是我使用 Blend 为每个屏幕创建的 StoryBoard。

现在,我想编写一个行为来管理转换。此行为将作用于按钮。它将有两个属性。一个是 OldScreenContainer,它是 Panel 类型,代表我们要移除的屏幕的容器。第二个是NewScreen,它的类型是IScreenWithTransitions,代表我们想要放入容器中的新屏幕。

例如,假设我的根视觉对象称为 Border1,现在包含一个名为 Screen1 的子对象,该子对象具有一个名为 Button1 的按钮。单击按钮时,我想切换到 Screen2 ,因此我将在 Button1 上放置一个 SwitchScreensBehavior ,将 Border1 作为 OldScreenContainer 属性,将 Screen2 作为 NewScreen 属性。

此代码编译。我在 Blend 中看到了这个行为,可以将它拖到一个按钮上。但是我怎样才能设置行为的两个属性呢?Blend 向我展示了它们,但我不知道如何将它们指向新屏幕和容器(以及如果在运行时创建新屏幕会怎样)。所以我试图通过 XAML 定义这些属性,但又不知道该怎么做。也许在代码中定义它们?

或者这个功能对于行为来说太大了,并且存在其他优雅的解决方案(它尽可能多地依赖 XMAL)?

0 投票
3 回答
26998 浏览

android - 动画片段和返回堆栈

我在使用或理解从后台堆栈弹出 FragmentTransactions 如何处理自定义动画时遇到问题。具体来说,我希望它调用“out”动画,但似乎没有。

我有一个简单的方法来处理片段事务(FragmentTransaction),我在其中添加片段并应用自定义转换,以便它淡入/淡出。我还将它添加到后退堆栈中,以便用户可以使用后退按钮撤消该事务,基本上导航到添加片段之前的状态。

一切都很好,但是当用户单击后退按钮时,过渡动画不会反转。我所期望的是,当片段被移除时,它会使用淡出动画。相反,它似乎弹出(没有动画),然后容器似乎淡入。我不确定这正是正在发生的事情,但片段绝对没有淡出。

我的应用程序使用兼容性库来添加片段支持,但我认为这也适用于 Honeycomb (android-11)。有谁知道我只是在这里做错了什么还是我只是期待太多?理想情况下,我想为片段设置动画,类似于 Gmail(在 Xoom 上)通过单击消息向前移动然后使用返回按钮返回的方式。最好不必覆盖后退按钮功能并跟上我自己的片段状态,因为我可能有几个我想退出的“事务”,而且我不喜欢重新发明轮子。

还询问了 Android 开发者组:http ://groups.google.com/group/android-developers/browse_thread/thread/1136a3a70fa0b6e9

0 投票
2 回答
2110 浏览

apache-flex - 在 Flex 4 中,状态转换不会双向调整大小

我有两种状态。当我从 OFF 切换到 A 时,它会正确调整大小,但是当我从 A 切换回 OFF 时,它会发生没有平滑的调整大小转换。我究竟做错了什么?

这是我的代码:

在此先感谢,努诺

0 投票
1 回答
521 浏览

apache-flex - 在 Flex 4 中,状态转换不会在两个方向上调整大小 (v2)

我已经对这个问题提出了另一个问题,该问题已成功解决。但是现在,有了一个稍微不同的例子,我又被困住了。

我有两种状态。当我从 A 切换到 B 时,它会正确调整大小,但是当我从 B 切换回 A 时,它会发生没有平滑的调整大小转换。我究竟做错了什么?

这是我的代码:

在此先感谢,努诺

0 投票
1 回答
1008 浏览

iphone - iPad:CATransform3DMakeRotation 翻转问题:一半的视图不可见

我已经编写了一些代码来将图像视图旋转 90 度然后翻转它。然而,翻转似乎切断了一半的图像。为什么会这样?

0 投票
1 回答
207 浏览

css - 歌剧css3过渡忽略计时器?- 错误或功能?

在这里做了一个小的动画实验菜单http://jsfiddle.net/NWvSQ/1/

在 Opera 中,当您将鼠标悬停在某个项目外时,边框半径会立即变回(项目会在一秒钟内变为方形),而不是动画。在 Chrome 和 Firefox 中似乎没问题。

请问这是bug还是功能?有什么可用的修复吗?

谢谢