在上一个单组件改变状态效果的基础上,增加至两个组件之间的切换,更好的理解其中的关联,下次有时间把他们之间的关系总结一下!
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
styleName="applicationcenter" currentState="pan1_state">
<mx:states>
<mx:State name="pan1_state">
<mx:SetEventHandler target="{but1}" name="click" handler="currentState='pan2_state'"/>
</mx:State>
<mx:State name="pan2_state">
<mx:RemoveChild target="{pan1}"/>
<mx:AddChild relativeTo="{canvas1}" position="lastChild">
<mx:Panel x="46" y="23" width="250" height="200" layout="absolute" id="pan2" title="pan2">
<mx:Button x="82" y="58" label="but2" id="but2" click="currentState='pan1_state'"/>
</mx:Panel>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Style source="css/css.css"/>
<mx:Canvas width="352" height="260" borderColor="#A42B2B" borderStyle="solid" borderThickness="5" id="canvas1">
<mx:Panel x="46" y="23" width="250" height="200" layout="absolute" title="pan1" id="pan1">
<mx:Button x="82" y="58" label="but1" id="but1"/>
</mx:Panel>
</mx:Canvas>
<mx:transitions>
<mx:Transition fromState="pan1_state" toState="pan2_state">
<mx:Sequence>
<mx:WipeLeft target="{pan1}" showTarget="false"/>
<mx:RemoveChildAction target="{pan1}"/>
<mx:AddChildAction target="{pan2}"/>
<mx:WipeRight target="{pan2}"/>
</mx:Sequence>
</mx:Transition>
<mx:Transition fromState="pan2_state" toState="pan1_state">
<mx:Sequence target="{pan2}">
<mx:WipeLeft showTarget="false"/>
<mx:RemoveChildAction target="{pan2}"/>
<mx:AddChildAction target="{pan1}"/>
<mx:WipeRight target="{pan1}"/>
</mx:Sequence>
</mx:Transition>
</mx:transitions>
</mx:Application>
分享到:
相关推荐
LINEAR TIME-VARYING SYSTEMS - STATE TRANSITION MATRIX
Implementierung des State-Transition-Diagram-Editors
描述了状态之间的转换模型,作者Anup Kumar Bandyopadhyay
State Transition Factor of Three-state Markov Channels
Stateflow逻辑系统建模2
过渡4 transition属性 01 定义和用法 ...使用transition属性设置多个过渡效果时,它的各个参数必须按照顺序进行定义,不能颠倒。 定义和用法 例:实现鼠标滑动到div上,停留0.9秒后以width方向过度,过度
阶段过渡 简单的Vue组件,用于执行阶段延迟的过渡。 用法 < script > import VueStagedTransition from ' vue-staged-transition ' e
子组件: <div class=mask click.self=onMask></div> <transition name=slide-fade> 我的 </transition> [removed] export default { name: mine, props: [showMine], data() { return {};
只需下载dist/phaser-state-transition.umd.js文件,即可完成操作,但这不是推荐的方法。 您应该通过npm使用它。 您可以更好地控制本地保留的版本。 用法 使用它的最简单方法是仅输入一个过渡即可。 import { ...
主要介绍了Vue 过渡(动画)transition组件案例详解,非常不错,具有参考借鉴价值,需要的朋友参考下
methods which may transition the object into a new state. A flow-sensitive, permission-based type system helps developers track which state objects are in. First-class typestates are a powerful ...
主要介绍了Vue中的transition封装组件的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
记一次vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版… template模板结构 // 单个元素 <transition name=自定义名字> ...
主要目标是提供一种简便的方法,在从一个组件过渡到另一个组件时应用简单的动画,而不会浪费太多的时间进行测试,调整,样式化等。只需几行代码,就可以制作出任何动画。React页面更具交互性和用户友好性。 填充胶 ...
基本概念 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class... 一个页面子组件 router-view 的消失隐藏,使用transition 组件控制其变化过程 // 子组件 <tr
Flash transition effect.
实现Android动画Transition使用方法
ffmpeg-gl-transition
总所周知,vue中的transition标签可以方便得进行动画过渡,使用的方法也很简单。 <transition name=你要的名字> 过渡的元素... </transition> 这里需要主要一点的是:过渡的元素只能是以下之一: 条件渲染 (使用...