标签: slide
Angular js - 幻灯片视图,但不是主页 - ng-animate
我正在使用ng-animate来滑动应用程序视图,因此每条路径都会自己滑动视图,这是我的简单代码:
HTML:
<div ng-view ng-animate class="slide"></div>
CSS:
/*Animations*/
.slide{
left:0;
}
.slide.ng-enter{
transition:0.15s linear all;
position:fixed;
z-index:inherit;
left:-100%;
height:inherit;
}
.slide.ng-leave{
transition:0.15s linear all;
position:fixed;
z-index:9999;
right:0;
}
.slide.ng-leave-active{
transition:0.15s linear all;
position:fixed;
right:-100%;
left:100%;
}
.slide.ng-enter-active{
transition:0.15s linear all;
left:0;
position:relative;
}
现在,我想知道, is there anyway to exclude the home page (main "/" route) from sliding?
换句话说:任何从ng-animate中排除路线的方法？
推荐指数
解决办法
查看次数
如何在点击按钮时向上/向下滑动隐藏的div？
我希望实现这种类型的向下滑动,除了而不是悬停我认为我需要某种类型的脚本,在点击时触发向下滑动,然后再次单击以触发反向滑动.我将隐藏一个div(顶部:-400px;位于页面顶部之上),当单击按钮并向下滑动并坐在顶部时:0;
HTML
<div class="container"><div class="one">Hover me to reveal new div</div>
<div class="two">I slid!<br>And I am higher than the div before me...</div>
</div>
CSS
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: lightblue;
z-index: 1;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
.one:hover + .two {
top: 0px;
}
这是一个工作小提琴http://jsfiddle.net/8ZFMJ/2/ - 任何帮助将不胜感激.
我已经尝试过使用slideToggle但是这会创建一个"扩展"效果,这不是我想要实现的向下滑动的类型.
非常感谢.
推荐指数
解决办法
查看次数
滑动整个网页
有没有办法模仿"滑动整个页面"的原生过渡和功能,就像你在iPhone上看到的那样,而是在网络浏览器中？
我想要一个HTML页面滑过,一个新的HTML页面在按下按钮后就可以了.
按钮不能是常量.因此,如果您有一个带有按钮的常量标题,这些按钮可以在框内滑动内容,那么这将是不正确的.我需要滑动整个网页.
用HTML5制作的幻灯片是我需要的吗？预先感谢您的任何帮助!
编辑:我一直在考虑可能并排设置两个全尺寸DIV,其中一个隐藏在页面上,"溢出:隐藏",然后使用CSS转换按一个按钮,然后将一个DIV移出屏幕,另一个进入视野,但我不知道该怎么做.
另一个非常困难的部分是我的DIV容器需要是动态的,100%的宽度和高度.我不能使用固定尺寸.
编辑:
使用由Ariel Flesler开发的scrollTo和localscroll函数,我已经能够完成我正在寻找的99%.但是,在开发的最后阶段,我遇到了一个巨大的障碍.这是一张我希望有助于解释我想要做的图像:
我的问题是主要内容区域是一个带有overflow-y auto的固定位置,因此我可以在页眉和页脚之间保留DIV的滚动条.但问题是,当我按下我的按钮启动我的DIV的滑动动画时,固定的内容区域不会移动,只有页眉和页脚移动.如果我将主要内容区域的位置更改为"相对",一切都会像我想要的那样移动,但是我失去了滚动的定位.
如果有人能想到这一点,我将非常感激你!
(我会发布一个链接到我所拥有的,但我不能.这是公司的保密工作)
先感谢您!!
编辑 我正在审查所有这些信息.我会在几天后回复.谢谢大家的输入!
推荐指数
解决办法
查看次数
适用于Android的轻微左/右滑动动作列表视图
我不确定这里是否有这个问题.我想方设法在Android的listview中模拟幻灯片操作.类似于三星Galaxy/Nexus联系人列表操作.
从下图中我可以看到,我向右滑动,并显示了一个不同的视图来代替联系人.(没有数字视图)
推荐指数
解决办法
查看次数
使用jQuery FlexSlider添加或删除幻灯片
是否可以使用FlexSlider在运行时添加或删除幻灯片？
推荐指数
解决办法
查看次数
水平和垂直双向触摸滑动滑块
有许多JavaScript或CSS触摸滑动滑块,但它们似乎只允许垂直或水平滑动滑块.是否有任何东西允许在一张幻灯片上,所以我可以在一张幻灯片上水平和垂直滑动？
推荐指数
解决办法
查看次数
Angular指令和Jquery slideToggle函数实现
使用angular和jquery我实现了slideToggle函数.为了只将这个函数应用于一个特定的HTML元素,我在ng-click函数中使用了一个参数,我的代码工作正常但是,我想知道是否存在另一种更好的方法来实现angular中的指令和ng-click函数:
的index.html
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="MainController">
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
</head>
<body>
<div>
<input type="button" ng-click="toggle('first')" value="Toggle First">
<input type="button" ng-click="toggle('second')" value="Toggle Second">
<input type="button" ng-click="toggle('third')" value="Toggle third">
<div class="div1" section="first" toggle="first" >
<p>This is section #1</p>
</div>
<div class="div1" toggle="second">
<p>This is another section #1</p>
</div>
<div class="div1" toggle="third">
<p>This is 3 section #1</p>
</div>
</div>
</body>
<footer>
<script src="js/jquery.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/directives.js"></script>
</footer>
</html>
styles.css的
.div1 {
background: Brown;
width: 200px;
height: 200px;
text-align: …推荐指数
解决办法
查看次数
Bootstrap轮播幻灯片问题上的火灾事件
我尝试使用此代码在旋转木马滑动时触发事件,但由于某种原因它无法工作.有什么建议？
var $carousel = $('#carousel-showcase');
$carousel.carousel();
$carousel.bind('slide', function(e) {
setTimeout( function(){
var left = $carousel.find('.item.active.left');
var right = $carousel.find('.item.active.right');
if(left.length > 0) {
$("#wrap").animate({
backgroundPositionX: '+=50%'
},0);
}
else if(right.length > 0) {
$("#wrap").animate({
backgroundPositionX: '-=50%'
},0);
}
}, 500);
});
推荐指数
解决办法
查看次数
路由组件的Angular 2"动画幻灯片"
假设我在固定导航栏中有2个路由组件和两个Routerlink来路由它们.当我点击Routerlinks时,我希望它们从右侧滑入.
我不想用css来偏移组件,并使用超时函数来更改css类以让它滑入(例如使用ngStyle或ngClass).
在Angular 2中有没有更优雅的方法来实现这一目标？
谢谢!
推荐指数
解决办法
查看次数
Flutter slideTransition没有动画
因此，我试图在颤动中创建一个琐碎的幻灯片过渡元素，但遇到了一些困难。下面的操作是等待动画时间，然后仅显示Text("hello there sailor")。我不知道为什么这不是动画效果-看起来与以前的帖子非常相似，其中包含一个琐碎的示例（将动画滑动到底部抖动）。
这就是我所谓的以下代码：DeleteCheck(offsetBool: widget.model.deleteNotify, widthSlide: 0.50*width100)where double width100 = MediaQuery.of(context).size.width;。
有人看到我在做什么错吗？
class DeleteCheck extends StatefulWidget{
final offsetBool;
final double widthSlide;
DeleteCheck({
Key key,
this.offsetBool,
this.widthSlide
}): super(key: key);
@override
State<StatefulWidget> createState() {
return new _MyDeleteCheck();
}
}
class _MyDeleteCheck extends State<DeleteCheck> with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> _offsetFloat;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
_offsetFloat = Tween<Offset>(begin: Offset(widget.widthSlide, 0.0), end: Offset.zero)
.animate(_controller);
_offsetFloat.addListener((){ …推荐指数
解决办法
查看次数