我正在使用英特尔的 AppFramework,我有这个代码:
<div title="welcome" id="login" class="panel" selected="true">
<!-- some code here -->
<a href="#register" class="soc-btn gray-btn left" data-transition="slide">Sign Up</a>
<!-- some code here -->
</div
<div title="register" id="register" class="panel">
<!-- some code here -->
<a href="#login" class="soc-btn gray-btn left" data-transition="slide">Cancel</a>
<!-- some code here -->
</div>
从#login 到#register 的转换就像一个魅力,页面从右到左加载。但是如何在#register 上应用'slide-back' 转换使'cancel' 按钮从左到右加载#login?
我在ui/transition/all.js文档中看到:
Initiate a sliding transition. This is a sample to show how transitions are implemented.
These are registered in $ui.availableTransitions and take in three parameters.
@param {Object} previous panel
@param {Object} current panel
@param {Boolean} go back
@title $ui.slideTransition(previousPanel,currentPanel,goBack);
但是如何将“goBack”参数添加到我的代码中?谢谢你
这是幻灯片转换的完整代码:
(function ($ui) {
/**
* Initiate a sliding transition. This is a sample to show how transitions are implemented. These are registered in $ui.availableTransitions and take in three parameters.
* @param {Object} previous panel
* @param {Object} current panel
* @param {Boolean} go back
* @title $ui.slideTransition(previousPanel,currentPanel,goBack);
*/
function slideTransition(oldDiv, currDiv, back) {
oldDiv.style.display = "block";
currDiv.style.display = "block";
var that = this;
if (back) {
that.css3animate(oldDiv, {
x: "0%",
y: "0%",
complete: function () {
that.css3animate(oldDiv, {
x: "100%",
time: $ui.transitionTime,
complete: function () {
that.finishTransition(oldDiv, currDiv);
}
}).link(currDiv, {
x: "0%",
time: $ui.transitionTime
});
}
}).link(currDiv, {
x: "-100%",
y: "0%"
});
} else {
that.css3animate(oldDiv, {
x: "0%",
y: "0%",
complete: function () {
that.css3animate(oldDiv, {
x: "-100%",
time: $ui.transitionTime,
complete: function () {
that.finishTransition(oldDiv, currDiv);
}
}).link(currDiv, {
x: "0%",
time: $ui.transitionTime
});
}
}).link(currDiv, {
x: "100%",
y: "0%"
});
}
}
$ui.availableTransitions.slide = slideTransition;
$ui.availableTransitions['default'] = slideTransition;
})(af.ui);