Question

我有一个场景，我需要点击div，这会给我另一个div进行一些转换，但问题是点击的div在转换时隐藏了div。我需要点击的div与转化div一起滑动并具有相同的转换效果。以下是我的尝试：

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

任何帮助都将受到高度赞赏。

DEMO

Answer 1

将HTML修改为以下内容：

<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>

我还会为具有ng-click属性的div添加转换持续时间。而不是将方向转换设置为left,，而是将其更改为margin-left。同时将float:left添加到main div和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;
}

注意：我还为动画所需的两个元素添加了设置宽度。

这是一个小提琴：http://jsfiddle.net/dvpdnjps/636/

另一种解决方案

如果您需要将隐藏的div保持绝对位置，则可以对JS代码进行以下更改：

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：

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

然后你必须确保在点击时调用changeVal函数：

<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>

这里我正在移动“RIGHT”div以及隐藏的div。通过这种方式，您可以将隐藏的div保持绝对定位。

请参阅小提琴：http://jsfiddle.net/dvpdnjps/639/

Answer 2

我进行了3次更改并获得了很酷的效果，但我不确定您在此过渡期间想要什么。试图为其他人正确地制作动画与尝试描述它一样困难。

更改

.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;
  ...
}

我删除了供应商前缀，不再需要它们，请参阅CanIUse

FIDDLE

单击div以使用过渡div滑动

2 个答案:

更改