单击 div 与过渡 div 一起滑动答案

【问题标题】：clicked div to slide with the transition div单击 div 与过渡 div 一起滑动
【发布时间】：2016-07-19 20:29:31
【问题描述】：

我有一个场景，我需要单击 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

【问题讨论】：

添加位置：相对；到 #outerdiv 并尝试将 (.animate-hide) top:10px 调整为 20px;

标签： css css-transitions css-animations

【解决方案1】：

我进行了 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 一起移到一边，当我点击返回时，它应该回到相同的位置

【解决方案2】：

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

【讨论】：

感谢您的回答，但在小提琴中您已经删除了 position:absolute 和 z-index:1 但我需要应用，如果我一直认为这个过渡不起作用
如果您将位置设为绝对位置，则不会移动其他 div。您可以在相同的持续时间为两者设置动画。您可以将结果 div 向下移动，这样绝对 div 就不会覆盖它。
是的，但如果我保持绝对位置，我在右侧的内容会受到干扰，我不想发生这种情况