我正在尝试在项目之间切换时添加过渡效果.这个代码目前有效,但我宁愿在切换项目时有一些淡入淡出效果.这可能吗？
这是一个jsfiddle,如果这有帮助的话.谢谢!
我的代码:
HTML
<body>
<div id="proj_name"></div>
<div id="proj_description"></div>
<img id="proj_img" src=""><br>
<button id="proj_switcher">Next Project</button>
</body>
JavaScript的
/**
* Constructor function for Projects
*/
function Project(name, description, img) {
this.name = name;
this.description = description;
this.img = img;
}
// An array containing all the projects with their information
var projects = [
new Project('Project 1', 'Project 1 Description', 'http://bit.ly/1E0IzpX'),
new Project('Project 2', 'Project 2 Description', 'http://bit.ly/1FHLGOt'),
new Project('Project 3', 'Project 3 Description', 'http://bit.ly/1H5wRt7'),
new Project('Project 4', 'Project 4 …我有活动A设置为纵向运行(android:screenOrientation ="portrait"在清单中的此活动上设置).单击按钮时,此活动将打开活动B. 活动B设置为横向运行(在清单中此活动上设置的android:screenOrientation ="landscape").无论我在overridePendingTransition方法中设置什么,都没有动画.这总是很难.从活动A转换到活动B时,有没有办法强制某种动画？
此外,从活动B转换回活动A时,我遇到了同样的问题.
编辑(来自Praveen):
即使我已经configChanges="orientation"在清单中打了十分.我还在面对这个问题吗？对此有何想法？
提前致谢
我想在CSS中进行高度转换,但我注意到我必须静态调整高度才能使其正常工作.
这是我的代码使用静态高度:
<!-- HTML --->
<div class="content show">
<form method="post" action="">
<label>Lastname
<input type="text" name="lastname">
</label>
<label>Firstname
<input type="text" name="firstname">
</label>
</form>
</div>
/* CSS */
.content{
overflow:hidden;
}
.content.show{
height:433px !important; <<--------- //I would not define this height
transition:0.5s;
-webkit-transform:translateY(0);
}
.content.hidden{
height:60px;
transition:0.5s;
-webkit-transform:translateY(0);
}
这是我想要的自动高度代码:
<!-- HTML --->
<div class="content show">
<form method="post" action="">
<label>Lastname
<input type="text" name="lastname">
</label>
<label>Firstname
<input type="text" name="firstname">
</label>
</form>
</div>
/* CSS */
.content{
overflow:hidden;
}
.content.show{
height:auto !important; <<<----------
transition:0.5s; …我正在使用setInterval,因此转换发生在一定的时间间隔之后.是否可以暂停和恢复使用setInterval？
任何正确方向的建议/指示都会非常有帮助.
谢谢!
我想在ViewController(1)和NavigationViewController(2)之间进行交互式转换.
NavigationController由一个按钮调用,因此在呈现时没有交互式转换.它可以通过按钮或UIPanGestureRecognizer来解除,因此它可以被交互或不被解雇.
我有一个名为TransitionManager的对象,用于转换,UIPercentDrivenInteractiveTransition的子类.
下面的代码的问题interactionControllerFor...是永远不会调用两个委托方法.
此外,当我按下按钮或swip(UIPanGestureRecognizer)时,模态segue的基本动画完成.所以这两个委托方法animationControllerFor...也不起作用.
有任何想法吗 ？谢谢
let transitionManager = TransitionManager()
override func viewDidLoad() {
super.viewDidLoad()
self.transitioningDelegate = transitionManager
}
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
let dest = segue.destinationViewController as UIViewController
dest.transitioningDelegate = transitionManager
dest.modalPresentationStyle = .Custom
}
class TransitionPushManager: UIPercentDrivenInteractiveTransition,
UINavigationControllerDelegate, UIViewControllerTransitioningDelegate {
@IBOutlet var navigationController: UINavigationController!
var animation : Animator! // Implement UIViewControllerAnimatedTransitioning protocol
override func awakeFromNib() {
var panGesture = UIPanGestureRecognizer(target: self, action: "gestureHandler:")
navigationController.view.addGestureRecognizer(panGesture)
animation = Animator()
} …我想在我的网站上添加一些过渡.我已经知道当有人在输入字段中时(所以:焦点)边框会随着过渡而改变颜色.我希望从中心到左右发生这种转变.
所以动画是双方扩大的边界.这可能与CSS有关吗？如果我必须使用Jquery或Javascript它没关系.
提前谢谢,伊恩
这可能已经在某个地方得到了回答,但我在搜索之后还没有找到.
我有一系列背景图像的div.大小设置为background-size:cover.
但我希望能够让图像放大并在悬停时增长.此转换不适用于看起来的封面属性.实际上,图像放大但没有过渡效果.它立即从"封面"到,在这种情况下,110%.当原始背景大小设置为100%时,它工作正常.
但有了这个,在调整页面大小时,图像似乎有点落后于div,这不是我想要的.封面始终保持中心,我想要的.
任何有关如何进行转换的建议,因为它会以覆盖或相同的效果增长.
Ilmiont
这里有一个示例jsfiddle来演示我的问题.
Hello和World链接会更改路线.动画在离开时已应用于Hello路由.实际上,转换的设置使得当Hello页面离开时,它会要求子组件<h1>在其自身中进行动画处理componentWillLeave,从而完成可以快速卸载的页面.我这样做是因为在我的真实应用程序中,当Hello页面离开时,其子组件需要以不同的方式进行动画处理 - 因此它不是整页的单个转换.
要查看问题,请单击Hello to load Hellopage.然后单击该页面的World链接World.World即使Hello是动画,您也会看到页面已加载.
那么我该如何World等待动画完成呢？我想要确认的另一件事是,在父组件离开之前我用来使子组件动画的方法是否正确.
作为参考,我在master分支中使用最新的react-router:1.0b4
如何向我的颤动路线添加自定义过渡.这是我目前的路线结构
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Yaip',
theme: new ThemeData(
primarySwatch: Colors.pink,
brightness: Brightness.light
),
home: new VerifyPhoneNumber(),
routes: <String, WidgetBuilder>{
'/verified': (BuildContext context) => new MobileNumberVerified(),
'/setupprofile': (BuildContext context) => new SetUpProfile()
},
);
}
}
我有两页，Page A并且Page B。要从Page A到进行转换Page B，我使用Navigation.push()：
Navigator.push(
context,
CupertinoPageRoute(...)
);
然而，这种过渡有很多卡顿和丢帧现象。（是的，我在配置文件模式下运行）
我想到的原因之一是Page B有如此多的重型 UI 渲染（例如 Google 地图和图表），而且我还注意到当页面滑动动画发生时，Page B渲染已经开始。
我试图了解如何改善这种体验，也许可以通过某种方式预加载Page B。
我已经从 Github 问题（tldr use ）中读到了这个建议Future.microtask(()，但它对我不起作用。将不胜感激任何帮助或建议。
transition ×10
css ×3
animation ×2
dart ×2
flutter ×2
html ×2
javascript ×2
android ×1
border ×1
css3 ×1
d3.js ×1
delegates ×1
focus ×1
html5 ×1
interactive ×1
ios ×1
react-router ×1
reactjs ×1
routes ×1
swift ×1