gpt4 book ai didi

angularjs - Angular 动画滑动面板-加载 View 时显示第二个

转载 作者:行者123 更新时间:2023-11-28 08:56:43 28 4
gpt4 key购买 nike

我正在尝试构建应该隐藏的动画垂直面板

当用户点击按钮时,面板应该从右边滑动。这是我的代码:

HTML:

<body ng-controller="Ctrll">
<p style="color:#000;margin:0"><span>slide:</span>{{slide}} </p>


<button ng-click="showAlerts()" style="float:left">
click to toggle panel
</button>
<!--sliding panel directive-->
<alerts-center></alerts-center>


<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="js/index.js"></script>
</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;
}



.animate-slide {
background:#30373f;
position:absolute;
width: 320px;
height:100%;
top: 0;
right:0px;
}

.animate-slide.ng-hide-add,
.animate-slide.ng-hide-remove {
display:none;
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
}

.animate-slide.ng-hide-remove.ng-hide-remove-active {
-webkit-animation:0.5s slide-left;
animation:0.5s slide-left;
}

.animate-slide.ng-hide-add.ng-hide-add-active {
-webkit-animation:0.5s slide-right;
animation:0.5s slide-right;
}

.animate-slide.ng-hide {
right:-320px;
display:none;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slide-left
{
0% {right:-320px;}
100% {right:0;}
}

/* Standard syntax */
@keyframes slide-left
{
0% {right:-320px;}
100% {right:0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slide-right
{
0% {right:0;}
100% {right:-320px;}
}
/* Standard syntax */
@keyframes slide-right
{
0% {right:0;}
100% {right:-320px;}
}

JS:

 angular.module("app",["ngAnimate"])
.controller("Ctrll",function($scope, $timeout){
$scope.showAlerts = function($event) {

$timeout(function(){
$scope.$broadcast('openAlerts');
},1)
}
})
.controller('alertsCtrl', function ($scope) {
$scope.$on('openAlerts', function(event, args) {
$scope.slide = !$scope.slide;
});
})
.directive('alertsCenter', function () {
return {
templateUrl: 'alerts.html',
replace:true,
restrict: 'E',
controller:'alertsCtrl'
};
});

问题:

加载时滑动面板可见一秒然后隐藏

( demonstration )

将不胜感激任何建议

最佳答案

您可以使用 jQueryslideUp 或尝试自定义 Angular 指令,如 AngularSlideables .但您也可以直接将 CSS 与 Angular 的 ngAnimate 模块一起使用,如下所示:

.panelAnimate {
transition: all 5s linear;
-moz-transition: all 5s linear; /* Firefox 4 */
-webkit-transition: all 5s linear; /* Safari and Chrome */
-o-transition: all 5s linear; /* Opera */
-ms-transition: all 5s linear; /* Explorer 10 */
}
.panelAnimate.ng-hide {
opacity: 0;
}

然后简单地定义你的面板:

<div class="panel panel-primary panelAnimate">...</div>

在您的特定情况下,您可能会使用 CSS 的 animate 而不是我在上面使用的 transition

关于angularjs - Angular 动画滑动面板-加载 View 时显示第二个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24929317/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com