我使用 angularjs.. 代码运行良好，带有文本的红色 div 显示在底部，当我单击 div 时，它从下到上设置动画...但我想将 div 放在顶部，当我单击时在上面...div 从上到下滑动...我尝试了所有方法，但没有任何帮助...请帮助我
这是我的html
<body ng-app="ngAnimate">
<div>
<div class="animate-slide" ng-show="slide" ng-click="slide=!slide">
<center>AngularJS ng-animate<center>
</div>
</div>
</body>
这是我的CSS
body{
background-color:#FFF;
height:100%;
width:100%;
margin:0;
color:#FFF;
font-size:3em;
line-height:100px;
text-align:center;
overflow:hidden;
}
#slide{
position:absolute;
width:100%;
height:100px;
top:90%;
background: red;
}
.animate-slide {
background:red;
position:absolute;
width: 100%;
height:100%;
top: 0;
-webkit-transform: translate3d(0,0,0); /* Chrome, Safari, Opera */
transform: translate3d(0,0,0,);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
.animate-slide.ng-hide-add,
.animate-slide.ng-hide-remove {
display:block!important;
}
.animate-slide.ng-hide-remove.ng-hide-remove-active {
-webkit-animation:0.5s slide-up;
animation:0.5s slide-up;
}
.animate-slide.ng-hide-add.ng-hide-add-active {
-webkit-animation:0.5s slide-down;
animation:0.5s slide-down;
}
.animate-slide.ng-hide {
top:80%;
display:block!important;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes slide-up
{
0% {top:80%;}
100% {top:0;}
}
/* Standard syntax */
@keyframes slide-up
{
0% {top:80%;}
100% {top:0;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes slide-down
{
0% {top:0;}
100% {top:80%;}
}
/* Standard syntax */
@keyframes slide-down
{
0% {top:0;}
100% {top:80%;}
}
最佳答案
要实现您想要的效果，请尝试此代码。
您需要删除 ng-show="slide" 并使用 ng-class。
HTML
<body ng-app="ngAnimate">
<div>
<div class="animate-slide"
ng-class="{'slide-up': !slide, 'slide-down': slide}"
ng-click="slide = !slide">
<center>AngularJS ng-animate</center>
</div>
</div>
</body>
然后删除不必要的样式。
移除:
.animate-slide.ng-hide-add,
.animate-slide.ng-hide-remove {
display:block!important;
}
.animate-slide.ng-hide-remove.ng-hide-remove-active {
-webkit-animation:0.5s slide-up;
animation:0.5s slide-up;
}
.animate-slide.ng-hide-add.ng-hide-add-active {
-webkit-animation:0.5s slide-down;
animation:0.5s slide-down;
}
.animate-slide.ng-hide {
top:80%;
display:block!important;
}
然后添加:
.animate-slide.slide-down {
-webkit-animation:0.5s slide-down normal forwards;
animation:0.5s slide-down normal forwards;
}
.animate-slide.slide-up {
-webkit-animation:0.5s slide-up normal forwards;
animation:0.5s slide-up normal forwards;
}
您的代码将如下所示:
body{
background-color:#FFF;
height:100%;
width:100%;
margin:0;
color:#FFF;
font-size:3em;
line-height:100px;
text-align:center;
overflow:hidden;
}
#slide{
position:absolute;
width:100%;
height:100px;
top:90%;
background: red;
}
.animate-slide {
background:red;
position:absolute;
width: 100%;
height:100%;
top: 0;
-webkit-transform: translate3d(0,0,0); /* Chrome, Safari, Opera */
transform: translate3d(0,0,0,);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
.animate-slide.slide-down {
-webkit-animation:0.5s slide-down normal forwards;
animation:0.5s slide-down normal forwards;
}
.animate-slide.slide-up {
-webkit-animation:0.5s slide-up normal forwards;
animation:0.5s slide-up normal forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes slide-up
{
0% {top:80%;}
100% {top:0;}
}
/* Standard syntax */
@keyframes slide-up
{
0% {top:80%;}
100% {top:0;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes slide-down
{
0% {top:0;}
100% {top:80%;}
}
/* Standard syntax */
@keyframes slide-down
{
0% {top:0;}
100% {top:80%;}
}
这是 JsFiddle demo .
希望对您有所帮助。
关于jquery - 使用angularjs从上到下为div设置动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31311393/