<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qquickitemviewtransition.cpp -->
<title>ViewTransition QML Type | Qt Quick 5.12.6</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.12</td><td ><a href="qtquick-index.html">Qt Quick</a></td><td ><a href="qtquick-qmlmodule.html">QML Types</a></td><td >ViewTransition QML Type</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.6 Reference Documentation</a></td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#attached-properties">Attached Properties</a></li>
<li class="level1"><a href="#details">Detailed Description</a></li>
<li class="level2"><a href="#view-transitions-a-simple-example">View Transitions: a Simple Example</a></li>
<li class="level2"><a href="#using-the-viewtransition-attached-property">Using the ViewTransition Attached Property</a></li>
<li class="level2"><a href="#handling-interrupted-animations">Handling Interrupted Animations</a></li>
<li class="level2"><a href="#restrictions-regarding-scriptaction">Restrictions Regarding ScriptAction</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">ViewTransition QML Type</h1>
<span class="subtitle"></span>
<!-- $$$ViewTransition-brief -->
<p>Specifies items under transition in a view. <a href="#details">More...</a></p>
<!-- @@@ViewTransition -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> Import Statement:</td><td class="memItemRight bottomAlign"> import QtQuick 2.12</td></tr></table></div><ul>
<li><a href="qml-qtquick-viewtransition-members.html">List of all members, including inherited members</a></li>
</ul>
<a name="attached-properties"></a>
<h2 id="attached-properties">Attached Properties</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-viewtransition.html#destination-attached-prop">destination</a></b></b> : point</li>
<li class="fn"><b><b><a href="qml-qtquick-viewtransition.html#index-attached-prop">index</a></b></b> : int</li>
<li class="fn"><b><b><a href="qml-qtquick-viewtransition.html#item-attached-prop">item</a></b></b> : item</li>
<li class="fn"><b><b><a href="qml-qtquick-viewtransition.html#targetIndexes-attached-prop">targetIndexes</a></b></b> : list</li>
<li class="fn"><b><b><a href="qml-qtquick-viewtransition.html#targetItems-attached-prop">targetItems</a></b></b> : list</li>
</ul>
<!-- $$$ViewTransition-description -->
<a name="details"></a>
<h2 id="details">Detailed Description</h2>
<p>With <a href="qml-qtquick-listview.html">ListView</a> and <a href="qml-qtquick-gridview.html">GridView</a>, it is possible to specify transitions that should be applied whenever the items in the view change as a result of modifications to the view's model. They both have the following properties that can be set to the appropriate transitions to be run for various operations:</p>
<ul>
<li><code>populate</code> - the transition to apply to the items created initially for the view, or when the model changes</li>
<li><code>add</code> - the transition to apply to items that are added to the view after it has been created</li>
<li><code>remove</code> - the transition to apply to items that are removed from the view</li>
<li><code>move</code> - the transition to apply to items that are moved within the view (i.e. as a result of a move operation in the model)</li>
<li><code>displaced</code> - the generic transition to be applied to any items that are displaced by an add, move or remove operation</li>
<li><code>addDisplaced</code>, <code>removeDisplaced</code> and <code>moveDisplaced</code> - the transitions to be applied when items are displaced by add, move, or remove operations, respectively (these override the generic displaced transition if specified)</li>
</ul>
<p>For the <a href="qml-qtquick-row.html">Row</a>, <a href="qml-qtquick-column.html">Column</a>, <a href="qml-qtquick-grid.html">Grid</a> and <a href="qml-qtquick-flow.html">Flow</a> positioner types, which operate with collections of child items rather than data models, the following properties are used instead:</p>
<ul>
<li><code>populate</code> - the transition to apply to items that have been added to the positioner at the time of its creation</li>
<li><code>add</code> - the transition to apply to items that are added to or reparented to the positioner, or items that have become <a href="qml-qtquick-item.html#visible-prop">visible</a></li>
<li><code>move</code> - the transition to apply to items that have moved within the positioner, including when they are displaced due to the addition or removal of other items, or when items are otherwise rearranged within the positioner, or when items are repositioned due to the resizing of other items in the positioner</li>
</ul>
<p>View transitions have access to a <a href="qml-qtquick-viewtransition.html">ViewTransition</a> attached property that provides details of the items that are under transition and the operation that triggered the transition. Since view transitions are run once per item, these details can be used to customize each transition for each individual item.</p>
<p>The <a href="qml-qtquick-viewtransition.html">ViewTransition</a> attached property provides the following properties specific to the item to which the transition is applied:</p>
<ul>
<li><a href="qml-qtquick-viewtransition.html">ViewTransition</a>.item - the item that is under transition</li>
<li><a href="qml-qtquick-viewtransition.html">ViewTransition</a>.index - the index of this item</li>
<li><a href="qml-qtquick-viewtransition.html">ViewTransition</a>.destination - the (x,y) point to which this item is moving for the relevant view operation</li>
</ul>
<p>In addition, <a href="qml-qtquick-viewtransition.html">ViewTransition</a> provides properties specific to the items which are the target of the operation that triggered the transition:</p>
<ul>
<li><a href="qml-qtquick-viewtransition.html">ViewTransition</a>.<a href="qml-qtquick-viewtransition.html#targetIndexes-attached-prop">targetIndexes</a> - the indexes of the target items</li>
<li><a href="qml-qtquick-viewtransition.html">ViewTransition</a>.<a href="qml-qtquick-viewtransition.html#targetItems-attached-prop">targetItems</a> - the target items themselves</li>
</ul>
<p>(Note that for the <a href="qml-qtquick-row.html">Row</a>, <a href="qml-qtquick-column.html">Column</a>, <a href="qml-qtquick-grid.html">Grid</a> and <a href="qml-qtquick-flow.html">Flow</a> positioner types, the <code>move</code> transition only provides these two additional details when the transition is triggered by the addition of items to a positioner.)</p>
<p>View transitions can be written without referring to any of the attributes listed above. These attributes merely provide extra details that are useful for customising view transitions.</p>
<p>Following is an introduction to view transitions and the ways in which the <a href="qml-qtquick-viewtransition.html">ViewTransition</a> attached property can be used to augment view transitions.</p>
<a name="view-transitions-a-simple-example"></a>
<h3 id="view-transitions-a-simple-example">View Transitions: a Simple Example</h3>
<p>Here is a basic example of the use of view transitions. The view below specifies transitions for the <code>add</code> and <code>displaced</code> properties, which will be run when items are added to the view:</p>
<pre class="qml">
ListView {
width: 240; height: 320
model: ListModel {}
delegate: Rectangle {
width: 100; height: 30
border.width: 1
color: "lightsteelblue"
Text {
anchors.centerIn: parent
text: name
}
}
add: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
}
displaced: Transition {
NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
}
focus: true
Keys.onSpacePressed: model.insert(0, { "name": "Item " + model.count })
}
</pre>
<p>When the space key is pressed, adding an item to the model, the new item will fade in and increase in scale over 400 milliseconds as it is added to the view. Also, any item that is displaced by the addition of a new item will animate to its new position in the view over 400 milliseconds, as specified by the <code>displaced</code> transition.</p>
<p>If five items were inserted in succession at index 0, the effect would be this:</p>
<p class="centerAlign"><img src="images/viewtransitions-basic.gif" alt="" /></p><p>Notice that the <a href="qml-qtquick-numberanimation.html">NumberAnimation</a> objects above do not need to specify a <code>target</code> to animate the appropriate item. Also, the <a href="qml-qtquick-numberanimation.html">NumberAnimation</a> in the <code>addTransition</code> does not need to specify the <code>to</code> value to move the item to its correct position in the view. This is because the view implicitly sets the <code>target</code> and <code>to</code> values with the correct item and final item position values if these properties are not explicitly defined.</p>
<p>At its simplest, a view transition may just animate an item to its new position following a view operation, just as the <code>displaced</code> transition does above, or animate some item properties, as in the <code>add</code> transition above. Additionally, a view transition may make use of the <a href="qml-qtquick-viewtransition.html">ViewTransition</a> attached property to customize animation behavior for different items. Following are some examples of how this can be achieved.</p>
<a name="using-the-viewtransition-attached-property"></a>
<h3 id="using-the-viewtransition-attached-property">Using the ViewTransition Attached Property</h3>
<p>As stated, the various <a href="qml-qtquick-viewtransition.html">ViewTransition</a> properties provide details specific to the individual item being transitioned as well as the operation that triggered the transition. In the animation above, five items are inserted in succession at index 0. When the fifth and final insertion takes place, adding "Item 4" to the view, the <code>add</code> transition is run once (for the inserted item) and the <code>displaced</code> transition is run four times (once for each of the four existing items in the view).</p>
<p>At this point, if we examined the <code>displaced</code> transition that was run for the bottom displaced item ("Item 0"), the <a href="qml-qtquick-viewtransition.html">ViewTransition</a> property values provided to this transition would be as follows:</p>
<div class="table"><table class="generic">
<thead><tr class="qt-style"><th >Property</th><th >Value</th><th >Explanation</th></tr></thead>
<tr valign="top" class="odd"><td ><a href="qml-qtquick-viewtransition.html">ViewTransition</a>.item</td><td >"Item 0" delegate instance</td><td >The "Item 0" <a href="qml-qtquick-rectangle.html">Rectangle</a> object itself</td></tr>
<tr valign="top" class="even"><td ><a href="qml-qtquick-viewtransition.html">ViewTransition</a>.index</td><td ><code>int</code> value of 4</td><td >The index of "Item 0" within the model following the add operation</td></tr>
<tr valign="top" class="odd"><td ><a href="qml-qtquick-viewtransition.html">ViewTransition</a>.destination</td><td >point value of (0, 120)</td><td >The position that "Item 0" is moving to</td></tr>
<tr valign="top" class="even"><td ><a href="qml-qtquick-viewtransition.html">ViewTransition</a>.<a href="qml-qtquick-viewtransition.html#targetIndexes-attached-prop">targetIndexes</a></td><td ><code>int</code> array, just contains the integer "0" (zero)</td><td >The index of "Item 4", the new item added to the view</td></tr>
<tr valign="top" class="odd"><td ><a href="qml-qtquick-viewtransition.html">ViewTransition</a>.<a href="qml-qtquick-viewtransition.html#targetItems-attached-prop">targetItems</a></td><td >object array, just contains the "Item 4" delegate instance</td><td >The "Item 4" <a href="qml-qtquick-rectangle.html">Rectangle</a> object - the new item added to the view</td></tr>
</table></div>
<p>The <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.<a href="qml-qtquick-viewtransition.html#targetIndexes-attached-prop">targetIndexes</a> and <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.<a href="qml-qtquick-viewtransition.html#targetItems-attached-prop">targetItems</a> lists provide the items and indexes of all delegate instances that are the targets of the relevant operation. For an add operation, these are all the items that are added into the view; for a remove, these are all the items removed from the view, and so on. (Note these lists will only contain references to items that have been created within the view or its cached items; targets that are not within the visible area of the view or within the item cache will not be accessible.)</p>
<p>So, while the <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.item, <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.index and <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.destination values vary for each individual transition that is run, the <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.<a href="qml-qtquick-viewtransition.html#targetIndexes-attached-prop">targetIndexes</a> and <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.<a href="qml-qtquick-viewtransition.html#targetItems-attached-prop">targetItems</a> values are the same for every <code>add</code> and <code>displaced</code> transition that is triggered by a particular add operation.</p>
<a name="delaying-animations-based-on-index"></a>
<h4 id="delaying-animations-based-on-index">Delaying Animations Based on Index</h4>
<p>Since each view transition is run once for each item affected by the transition, the <a href="qml-qtquick-viewtransition.html">ViewTransition</a> properties can be used within a transition to define custom behavior for each item's transition. For example, the <a href="qml-qtquick-listview.html">ListView</a> in the previous example could use this information to create a ripple-type effect on the movement of the displaced items.</p>
<p>This can be achieved by modifying the <code>displaced</code> transition so that it delays the animation of each displaced item based on the difference between its index (provided by <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.index) and the first removed index (provided by <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.<a href="qml-qtquick-viewtransition.html#targetIndexes-attached-prop">targetIndexes</a>):</p>
<pre class="qml">
displaced: Transition {
id: dispTrans
SequentialAnimation {
PauseAnimation {
duration: (dispTrans.ViewTransition.index -
dispTrans.ViewTransition.targetIndexes[0]) * 100
}
NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
}
}
</pre>
<p>Each displaced item delays its animation by an additional 100 milliseconds, producing a subtle ripple-type effect when items are displaced by the add, like this:</p>
<p class="centerAlign"><img src="images/viewtransitions-delayedbyindex.gif" alt="" /></p><a name="animating-items-to-intermediate-positions"></a>
<h4 id="animating-items-to-intermediate-positions">Animating Items to Intermediate Positions</h4>
<p>The <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.item property gives a reference to the item to which the transition is being applied. This can be used to access any of the item's attributes, custom <code>property</code> values, and so on.</p>
<p>Below is a modification of the <code>displaced</code> transition from the previous example. It adds a <a href="qml-qtquick-parallelanimation.html">ParallelAnimation</a> with nested <a href="qml-qtquick-numberanimation.html">NumberAnimation</a> objects that reference <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.item to access each item's <code>x</code> and <code>y</code> values at the start of their transitions. This allows each item to animate to an intermediate position relative to its starting point for the transition, before animating to its final position in the view:</p>
<pre class="qml">
displaced: Transition {
id: dispTrans
SequentialAnimation {
PauseAnimation {
duration: (dispTrans.ViewTransition.index -
dispTrans.ViewTransition.targetIndexes[0]) * 100
}
ParallelAnimation {
NumberAnimation {
property: "x"; to: dispTrans.ViewTransition.item.x + 20
easing.type: Easing.OutQuad
}
NumberAnimation {
property: "y"; to: dispTrans.ViewTransition.item.y + 50
easing.type: Easing.OutQuad
}
}
NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.OutBounce }
}
}
</pre>
<p>Now, a displaced item will first move to a position of (20, 50) relative to its starting position, and then to its final, correct position in the view:</p>
<p class="centerAlign"><img src="images/viewtransitions-intermediatemove.gif" alt="" /></p><p>Since the final <a href="qml-qtquick-numberanimation.html">NumberAnimation</a> does not specify a <code>to</code> value, the view implicitly sets this value to the item's final position in the view, and so this last animation will move this item to the correct place. If the transition requires the final position of the item for some calculation, this is accessible through <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.destination.</p>
<p>Instead of using multiple NumberAnimations, you could use a <a href="qtquick-animation-example.html#pathanimation">PathAnimation</a> to animate an item over a curved path. For example, the <code>add</code> transition in the previous example could be augmented with a <a href="qtquick-animation-example.html#pathanimation">PathAnimation</a> as follows: to animate newly added items along a path:</p>
<pre class="qml">
add: Transition {
id: addTrans
NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
PathAnimation {
duration: 1000
path: Path {
startX: addTrans.ViewTransition.destination.x + 200
startY: addTrans.ViewTransition.destination.y + 200
PathCurve { relativeX: -100; relativeY: -50 }
PathCurve { relativeX: 50; relativeY: -150 }
PathCurve {
x: addTrans.ViewTransition.destination.x
y: addTrans.ViewTransition.destination.y
}
}
}
}
</pre>
<p>This animates newly added items along a path. Notice that each path is specified relative to each item's final destination point, so that items inserted at different indexes start their paths from different positions:</p>
<p class="centerAlign"><img src="images/viewtransitions-pathanim.gif" alt="" /></p><a name="handling-interrupted-animations"></a>
<h3 id="handling-interrupted-animations">Handling Interrupted Animations</h3>
<p>A view transition may be interrupted at any time if a different view transition needs to be applied while the original transition is in progress. For example, say Item A is inserted at index 0 and undergoes an "add" transition; then, Item B is inserted at index 0 in quick succession before Item A's transition has finished. Since Item B is inserted before Item A, it will displace Item A, causing the view to interrupt Item A's "add" transition mid-way and start a "displaced" transition on Item A instead.</p>
<p>For simple animations that simply animate an item's movement to its final destination, this interruption is unlikely to require additional consideration. However, if a transition changes other properties, this interruption may cause unwanted side effects. Consider the first example on this page, repeated below for convenience:</p>
<pre class="qml">
ListView {
width: 240; height: 320
model: ListModel {}
delegate: Rectangle {
width: 100; height: 30
border.width: 1
color: "lightsteelblue"
Text {
anchors.centerIn: parent
text: name
}
}
add: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
}
displaced: Transition {
NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
}
focus: true
Keys.onSpacePressed: model.insert(0, { "name": "Item " + model.count })
}
</pre>
<p>If multiple items are added in rapid succession, without waiting for a previous transition to finish, this is the result:</p>
<p class="centerAlign"><img src="images/viewtransitions-interruptedbad.gif" alt="" /></p><p>Each newly added item undergoes an <code>add</code> transition, but before the transition can finish, another item is added, displacing the previously added item. Because of this, the <code>add</code> transition on the previously added item is interrupted and a <code>displaced</code> transition is started on the item instead. Due to the interruption, the <code>opacity</code> and <code>scale</code> animations have not completed, thus producing items with opacity and scale that are below 1.0.</p>
<p>To fix this, the <code>displaced</code> transition should additionally ensure the item properties are set to the end values specified in the <code>add</code> transition, effectively resetting these values whenever an item is displaced. In this case, it means setting the item opacity and scale to 1.0:</p>
<pre class="qml">
displaced: Transition {
NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
// ensure opacity and scale values return to 1.0
NumberAnimation { property: "opacity"; to: 1.0 }
NumberAnimation { property: "scale"; to: 1.0 }
}
</pre>
<p>Now, when an item's <code>add</code> transition is interrupted, its opacity and scale are animated to 1.0 upon displacement, avoiding the erroneous visual effects from before:</p>
<p class="centerAlign"><img src="images/viewtransitions-interruptedgood.gif" alt="" /></p><p>The same principle applies to any combination of view transitions. An added item may be moved before its add transition finishes, or a moved item may be removed before its moved transition finishes, and so on; so, the rule of thumb is that every transition should handle the same set of properties.</p>
<a name="restrictions-regarding-scriptaction"></a>
<h3 id="restrictions-regarding-scriptaction">Restrictions Regarding ScriptAction</h3>
<p>When a view transition is initialized, any property bindings that refer to the <a href="qml-qtquick-viewtransition.html">ViewTransition</a> attached property are evaluated in preparation for the transition. Due to the nature of the internal construction of a view transition, the attributes of the <a href="qml-qtquick-viewtransition.html">ViewTransition</a> attached property are only valid for the relevant item when the transition is initialized, and may not be valid when the transition is actually run.</p>
<p>Therefore, a <a href="qml-qtquick-scriptaction.html">ScriptAction</a> within a view transition should not refer to the <a href="qml-qtquick-viewtransition.html">ViewTransition</a> attached property, as it may not refer to the expected values at the time that the <a href="qml-qtquick-scriptaction.html">ScriptAction</a> is actually invoked. Consider the following example:</p>
<pre class="qml">
ListView {
width: 240; height: 320
model: ListModel {
Component.onCompleted: {
for (var i=0; i<8; i++)
append({"name": i})
}
}
delegate: Rectangle {
width: 100; height: 30
border.width: 1
color: "lightsteelblue"
Text {
anchors.centerIn: parent
text: name
}
objectName: name
}
move: Transition {
id: moveTrans
SequentialAnimation {
ColorAnimation { property: "color"; to: "yellow"; duration: 400 }
NumberAnimation { properties: "x,y"; duration: 800; easing.type: Easing.OutBack }
ScriptAction { script: moveTrans.ViewTransition.item.color = "lightsteelblue" }
}
}
displaced: Transition {
NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
}
focus: true
Keys.onSpacePressed: model.move(5, 1, 3)
}
</pre>
<p>When the space key is pressed, three items are moved from index 5 to index 1. For each moved item, the <code>moveTransition</code> sequence presumably animates the item's color to "yellow", then animates it to its final position, then changes the item color back to "lightsteelblue" using a <a href="qml-qtquick-scriptaction.html">ScriptAction</a>. However, when run, the transition does not produce the intended result:</p>
<p class="centerAlign"><img src="images/viewtransitions-scriptactionbad.gif" alt="" /></p><p>Only the last moved item is returned to the "lightsteelblue" color; the others remain yellow. This is because the <a href="qml-qtquick-scriptaction.html">ScriptAction</a> is not run until after the transition has already been initialized, by which time the <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.item value has changed to refer to a different item; the item that the script had intended to refer to is not the one held by <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.item at the time the <a href="qml-qtquick-scriptaction.html">ScriptAction</a> is actually invoked.</p>
<p>In this instance, to avoid this issue, the view could set the property using a <a href="qml-qtquick-propertyaction.html">PropertyAction</a> instead:</p>
<pre class="qml">
move: Transition {
id: moveTrans
SequentialAnimation {
ColorAnimation { property: "color"; to: "yellow"; duration: 400 }
NumberAnimation { properties: "x,y"; duration: 800; easing.type: Easing.OutBack }
//ScriptAction { script: moveTrans.ViewTransition.item.color = "lightsteelblue" } BAD!
PropertyAction { property: "color"; value: "lightsteelblue" }
}
}
</pre>
<p>When the transition is initialized, the <a href="qml-qtquick-propertyaction.html">PropertyAction</a> <code>target</code> will be set to the respective <a href="qml-qtquick-viewtransition.html">ViewTransition</a>.item for the transition and will later run with the correct item target as expected.</p>
<!-- @@@ViewTransition -->
<h2>Attached Property Documentation</h2>
<!-- $$$destination -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="destination-attached-prop">
<td class="tblQmlPropNode"><p>
<a name="destination-attached-prop"></a><span class="name">ViewTransition.destination</span> : <span class="type">point</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This attached property holds the final destination position for the transitioned item within the view.</p>
<p>This property value is a point with <code>x</code> and <code>y</code> properties.</p>
</div></div><!-- @@@destination -->
<br/>
<!-- $$$index -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="index-attached-prop">
<td class="tblQmlPropNode"><p>
<a name="index-attached-prop"></a><span class="name">ViewTransition.index</span> : <span class="type">int</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This attached property holds the index of the item that is being transitioned.</p>
<p>Note that if the item is being moved, this property holds the index that the item is moving to, not from.</p>
</div></div><!-- @@@index -->
<br/>
<!-- $$$item -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="item-attached-prop">
<td class="tblQmlPropNode"><p>
<a name="item-attached-prop"></a><span class="name">ViewTransition.item</span> : <span class="type">item</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This attached property holds the item that is being transitioned.</p>
<p><b>Warning:</b> This item should not be kept and referred to outside of the transition as it may become invalid as the view changes.</p>
</div></div><!-- @@@item -->
<br/>
<!-- $$$targetIndexes -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="targetIndexes-attached-prop">
<td class="tblQmlPropNode"><p>
<a name="targetIndexes-attached-prop"></a><span class="name">ViewTransition.targetIndexes</span> : <span class="type">list</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This attached property holds a list of the indexes of the items in view that are the target of the relevant operation.</p>
<p>The targets are the items that are the subject of the operation. For an add operation, these are the items being added; for a remove, these are the items being removed; for a move, these are the items being moved.</p>
<p>For example, if the transition was triggered by an insert operation that added two items at index 1 and 2, this targetIndexes list would have the value [1,2].</p>
<p><b>Note: </b>The targetIndexes list only contains the indexes of items that are actually in view, or will be in the view once the relevant operation completes.</p><p><b>See also </b><a href="qml-qtquick-viewtransition.html#targetItems-attached-prop">QtQuick::ViewTransition::targetItems</a>.</p>
</div></div><!-- @@@targetIndexes -->
<br/>
<!-- $$$targetItems -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="targetItems-attached-prop">
<td class="tblQmlPropNode"><p>
<a name="targetItems-attached-prop"></a><span class="name">ViewTransition.targetItems</span> : <span class="type">list</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This attached property holds the list of items in view that are the target of the relevant operation.</p>
<p>The targets are the items that are the subject of the operation. For an add operation, these are the items being added; for a remove, these are the items being removed; for a move, these are the items being moved.</p>
<p>For example, if the transition was triggered by an insert operation that added two items at index 1 and 2, this targetItems list would contain these two items.</p>
<p><b>Note: </b>The targetItems list only contains items that are actually in view, or will be in the view once the relevant operation completes.</p><p><b>Warning:</b> The objects in this list should not be kept and referred to outside of the transition as the items may become invalid. The targetItems are only valid when the Transition is initially created; this also means they should not be used by <a href="qml-qtquick-scriptaction.html">ScriptAction</a> objects in the Transition, which are not evaluated until the transition is run.</p>
<p><b>See also </b><a href="qml-qtquick-viewtransition.html#targetIndexes-attached-prop">QtQuick::ViewTransition::targetIndexes</a>.</p>
</div></div><!-- @@@targetItems -->
<br/>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br/> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
distrib
>
Mageia
>
7
>
i586
>
media
>
core-updates
>
by-pkgid
>
6e2327ca1c896c6d674ae53117299f21
>
files
>
1200
