clicked div to slide with the transition 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;
}

Any help would be highly appreciated.

DEMO

回答1:

I made 3 changes and got a cool effect, but I'm not sure what you want in this transition. Trying to get an animation correctly for someone else is just as hard as trying to describe it.

Changes

.animate-hide {
  ...
  margin: 0 0 15px 0;
  position: relative;
  ...
}

.animate-hide.ng-hide {
  ...
  transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  ...
}

I removed the vendor prefixes, they are no longer needed, see CanIUse

FIDDLE

回答2:

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>

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.

Here is a fiddle: http://jsfiddle.net/dvpdnjps/636/

ANOTHER SOLUTION

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');
    }
}
});

And then add this to your CSS:

.moved{
  margin-left:120px;
  transition-duration:.5s;
  padding-left:15px;
}

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>

Here I am moving the "RIGHT" div along with the hidden div. This way you can make your hidden div stay absolutely positioned.

See the fiddle: http://jsfiddle.net/dvpdnjps/639/

来源：https://stackoverflow.com/questions/38440976/clicked-div-to-slide-with-the-transition-div

标签

css

css3

css-transitions

css-animations