css trasition reposition child div flexbox

Question

https://jsfiddle.net/v4nqrwzv/ FIDDLE

如上面的gif动画所示，选择图标后，我会有轻微的抖动。图标放置在具有固定宽度的容器div内，并与flexbox均匀分隔。当用户进行选择时，未选中的图标将缩小到.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>

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

Answer 2

尝试使用以下代码，它可能会对您有所帮助。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;