问题描述
我有一个场景，我需要点击 div ，这将给我另一个 div ，但问题是点击 div 在转换 div 时隐藏。我需要点击的 div 滑动与过渡 div 具有相同的过渡效果。下面是我试过的：
I have a scenario where I need to click on a div which will give me another div with some transition, but the problem is the clicked div is getting hidden upon the transition div. I need the clicked div to slide with the transition div with the same transition effect. Below is what I have tried:
HTML：
<div id='outerdiv' ng-controller="MyCtrl" >
<div ng-click="myValue=!myValue">RIGHT</div>
<div id="one" class='animate-hide' ng-hide="myValue">
this is just a sample div
</div>
{{myValue}}
</div>
JS：
var app = angular.module("myApp1", ["ngAnimate"]);
app.controller("MyCtrl", function ($scope) {
$scope.myValue=true;
});
CSS：
.animate-hide {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
background:white;
position: absolute;
left: 0;
top: 10px;
}
.animate-hide.ng-hide {
left: -100%;
opacity:0;
padding:0 10px;
}
任何帮助将非常感激。
推荐答案
将HTML修改为以下内容：
Modify the HTML to the following:
<body ng-app="myApp1">
<div id='outerdiv' ng-controller="MyCtrl" >
<div id="one" class='animate-hide' ng-hide="myValue">
this is just a sample div
</div>
<div id="main" style="width:50px" ng-click="myValue=!myValue">RIGHT
{{myValue}}
</div>
</div>
</body>
我也会为 div 具有ng-click属性。而不是将定向转换设置为 left，将其更改为 margin-left 。同时向主 div和一个添加 float：left c> div：
I would also add a transition-duration for the div that has the ng-click attribute. Instead of setting the directional transition to left, change it to margin-left. Also add float:left to both the main div and the one div:
.animate-hide {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
background:white;
margin-left:0;
}
.animate-hide.ng-hide {
margin-left:-100%;
opacity:0;
padding:0 10px;
}
#one{
float:left;
width:100px;
transition-duration:.5s;
}
#main{
float:left;
width:100px;
transition-duration:.5s;
}
注意：我还为动画所需的两个元素添加了设置宽度。
Note: I also added set widths for both of the elements required to animate.
这里是一个小提琴：
其他解决方案
你需要保持隐藏的div定位为绝对的，你可以对你的JS代码进行以下更改：
If you need to keep the hidden div positioned absolute, you can make the following changes to your JS code:
var app = angular.module("myApp1", ["ngAnimate"]);
app.controller("MyCtrl", function ($scope) {
$scope.myValue = true;
$scope.changeVal = function(){
var mainDiv = document.getElementById('main');
$scope.myValue = $scope.myValue == true ? false : true;
if(!mainDiv.classList.contains('moved'))
{
mainDiv.classList.add("moved");
} else {
mainDiv.classList.remove('moved');
}
}
});
然后将其添加到您的CSS：
And then add this to your CSS:
.moved{
margin-left:120px;
transition-duration:.5s;
padding-left:15px;
}
然后你必须确保changeVal函数将被点击调用： / p>
Then you have to make sure the changeVal function will be called on click:
<body ng-app="myApp1">
<div id='outerdiv' ng-controller="MyCtrl" >
<div id="one" class='animate-hide' ng-hide="myValue">
this is just a sample div
</div>
<div id="main" style="width:50px" ng-click="changeVal();">RIGHT
{{myValue}}
</div>
</div>
</body>
这里我移动RIGHTdiv和隐藏的div。
Here I am moving the "RIGHT" div along with the hidden div. This way you can make your hidden div stay absolutely positioned.
查看小提琴：
这篇关于单击的div与过渡div滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！