css 过渡位置子 div flexbox答案

【问题标题】：css trasition reposition child div flexboxcss 过渡位置子 div flexbox
【发布时间】：2016-07-21 02:56:17
【问题描述】：

如上面的gif动画所示，我在选择图标后有轻微的抽搐动作。图标放置在一个固定宽度的容器 div 中，并以flexbox 均匀分布。当用户进行选择时，未选择的图标将缩小到 0.1，然后转到display: none。然而，剩余的图标在一个抽搐的运动中重新定位。我怎样才能使这个重新定位顺利？每个图标都有一个全为 1 的过渡。并且包含的 div 在宽度上也有一个过渡，这样我就可以使宽度自动。这是一些代码：

css：

.select-type--selections{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width:520px;
  transition: width 1s ease;
}

.select--outline{
  width: 100px;
  height: 100px;
  border-radius: 60%;
  position: relative;
  display: flex;
  justify-content: center;
  cursor: pointer;
  margin: 15px;
  @include card(1);
  transition: box-shadow .5s cubic-bezier(0.19, 1, 0.22, 1), 
    transform 1s cubic-bezier(0.19, 1, 0.22, 1), 
    opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);
 }
.material-out-transition{
  transform: scale(1);
  opacity: 1;
}

.material-out-enter, .material-out-leave{
  transform: scale(.1);
  opacity: 0;
}

html：

<div v-show="section=='select'" class="create--select-type">
    <h1>Select Task Type</h1>
    <div class="select-type--selections">
        <div v-for="(key, val) in taskType" v-show="val" transition="material-out" @click="makeSelect(key)" class="select--outline">
            <img class="option--icon" :src="'/assets/image/' + key + '.svg'" alt="edit task">
            <p class="outline--text">{{key}}</p>
        </div>
    </div>
</div>

【问题讨论】：

你能提供一个小提琴吗？
我在示例中添加了一个小提琴

标签： html css css-transitions flexbox

【解决方案1】：

在this article 的帮助下，我想出了this solution。

我觉得可能有比这更好的解决方案，但也许可以这样做。

（如果您需要固定大小的内容，您可以使用我创建的内容作为固定大小的以父为中心的内容的包装器）。

.icon
{
    //...
    flex-grow: 1;
}

.icon.hidden
{
    flex-grow: 0.00001; //setting to 0 breaks the transition
    width: 0px;
}

请注意，在动画结束之前，您不得将 div 设置为 display: none。

【讨论】：

【解决方案2】：

试试下面的代码，它可能会对你有所帮助。

$(document).ready(function(){
  $('.icon').click(function(){
    $('.icon').not(this).css('display', 'none');
  });
});

.container{
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
  flex-wrap: no wrap;
  justify-content: space-around;
}

.icon{
  width: 50px;
  height: 50px;
  transition: all .5s cubic-bezier(0.19, 1, 0.22, 1);
  border-radius : 50px;
  box-shadow: 0px 1px 2px #888888;
  text-align: center;
  cursor: pointer;
}

.iconFormat{
 font-size : 20px;
 padding : 15px;
 color : #888888;
}
div.icon:hover{
  box-shadow: 0px 5px 5px #888888;
}
div.icon>span{
display : none;
padding-top : 10px;
color : #888888;
}
div.icon:hover span{
display : block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="icon"><i class="fa fa-file-text-o iconFormat"></i><span>Reading</span></div>
  <div class="icon"><i class="fa fa-pencil iconFormat"></i><span>Writing</span></div>
  <div class="icon"><i class="fa fa-music iconFormat"></i><span>Music</span></div>
  <div class="icon"><i class="fa fa-film iconFormat"></i><span>Movie</span></div>
</div>

【讨论】：