'Could we apply any transition when flex layout change [duplicate]

Here is what I saying (just treat el-avatar as img):

<div class = "userMenu">
    <el-avatar :size="imgSize" :src="touXiangsrc" :fit = "fitMode" class = "userContent"> </el-avatar>
    <transition name = "userNametrans" mode="out-in">
      <p v-show= "!isMainCollapse" class = "userContent">{{userName}}</p>
    </transition>
  </div>

And here is CSS:

.userMenu{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

From this part of code, if I set

"display:none" (v-show equal to false), it will disappear and that img will in the center of div. but there is no transition so the transform will be a little bit hard. Is there any way to add transition for this change or other way to improve it?

htmlcssflexbox


Solution 1:[1]

The display property can't be transitioned. If you want to hide that element smoothly, you can create a transition to its width from the original value (e.g. 100px) to zero.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gabriel Marques

Related Questions