角度动画滑动面板 - 加载视图时显示第二个
Posted
技术标签:
【中文标题】角度动画滑动面板 - 加载视图时显示第二个【英文标题】：angular animated sliding panel - shows for second when view loaded 【发布时间】：2014-09-15 17:58:45 【问题描述】：我正在尝试构建动画垂直面板，假设它是隐藏的
当用户点击按钮时，面板应该从右侧滑动。 这是我的代码：
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)
将不胜感激任何建议
【问题讨论】：
【参考方案1】：您可以使用jQuery 的slideUp 或尝试自定义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。
【讨论】：
以上是关于角度动画滑动面板 - 加载视图时显示第二个的主要内容，如果未能解决你的问题，请参考以下文章
jQuery - 显示滑动面板时动画绝对定位的 div 的“左”位置
NO_DATA_FOUND ORACL NVL函数，当第一个为空时显示第二个参数值