javascript– 动画滑动div反d而不是顺利出现消失

javascript– 动画滑动div反d而不是顺利出现消失,第1张

概述我的应用程序中有一个导航栏和一个子导航栏.在子栏中,可以按下按钮,我希望此按钮打开一个新的子栏,隐藏原始栏.新的子栏应从主栏后面滑动并隐藏第二个栏.问题是:>当第三个条出现时,它反d而不是平滑>当第三个柱子消失时,它就会消失,并且不会像我预期的那样向后滑动我尝试使用top属性认为它可以解决问题,但事实并非如此.我在这里附上片段.或者你可以在jsf

我的应用程序中有一个导航栏和一个子导航栏.在子栏中,可以按下按钮,我希望此按钮打开一个新的子栏,隐藏原始栏.

新的子栏应从主栏后面滑动并隐藏第二个栏.

问题是:

>当第三个条出现时,它反d而不是平滑
>当第三个柱子消失时,它就会消失,并且不会像我预期的那样向后滑动

我尝试使用top属性认为它可以解决问题,但事实并非如此.

我在这里附上片段.或者你可以在jsfiddle查看它

angular.module('myapp.controllers',[]);var app = angular.module('myapp',['myapp.controllers','ngAnimate',]);angular.module('myapp.controllers').controller("barController",function ($scope) {    $scope.showActionsbar = false;    $scope.cancelAction = function () {        $scope.showActionsbar = false;    }    $scope.click = function () {        $scope.showActionsbar = true;    }});
.navbar-deploy {    background-color: red;    border: solID transparent;}.third,.sub-navbar-fixed {    background-color: black;    wIDth: 100%;    height:60px;    padding-top: 18px;    margin-bottom: 0px;    z-index: 1000;    color: white;}.actions-bar {    top: 40px;    background-color: yellow;    position: fixed;    padding-left: 0px;    z-index: 1001;}.sub-bar {    padding-top: 40px;}.third-in,.third-out {    -webkit-Transition:all ease-out 0.3s;    -moz-Transition:all ease-out 0.3s;    -ms-Transition:all ease-out 0.3s;    -o-Transition:all ease-out 0.3s;    Transition:all ease-out 0.3s;    -webkit-backface-visibility: hIDden;}.third-in.myhIDden-remove,.third-out.myhIDden-add.myhIDden-add-active {    display: block !important;    top: -2000px;    z-index: 0;}.third-out.myhIDden-add,.third-in.myhIDden-remove.myhIDden-remove-active {    display: block !important;    top: -80px;    z-index: 1001;}.myhIDden {    visibility: hIDden;}
          总结       

以上是内存溢出为你收集整理的javascript – 动画滑动div反d而不是顺利出现/消失全部内容,希望文章能够帮你解决javascript – 动画滑动div反d而不是顺利出现/消失所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1122337.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)