vue.js - Vue 过渡组 - 如何防止“跳跃”?
问题描述
我有两个 div 在使用 transition-group 之间进行转换,它应该可以正常工作 - 但是,div 转换下方的内容是“跳跃”的,具体取决于 div 的高度。我想要它阻止跳跃,而是以某种方式动画,所以在元素之间切换时我得到了一个很好的平滑过渡,而没有它“推”到“跳跃”的内容..
希望这是有道理的:)
我在这里设置了代码沙箱的示例:https ://codesandbox.io/s/reverent-stallman-8ixhp?file=/src/components/HelloWorld.vue
模板如下所示:
<div class="hello">
<button @click="groupShowOne">Show first {{ gShowFirst }}</button>
<button @click="groupShowTwo">Show second {{ gShowSecond }}</button>
<transition-group name="fade-group" tag="div" mode="out-in" appear>
<div
class="group-element"
v-if="gShowFirst"
style="background-color: yellow"
>
<h3>This is a headline</h3>
<p>This is a text</p>
</div>
<div
class="group-element"
v-if="gShowSecond"
style="background-color: red"
>
<h3>
This is a headline <br />This is a headline <br />This is a headline
This is a headline This is a headline This is a headline
</h3>
<p>
This is a text This is a text This is a text This is a text This is a
text v This is a text v <br />This is a text This is a text This is a
text This is a text This is a text v This is a text v <br />This is a
text This is a text This is a text This is a text This is a text v
This is a text v
</p>
</div>
</transition-group>
<div style="background-color: blue; min-height: 500px; color: #FFF">
Prevent this div from jumping<br />
</div>
</div>
动画看起来:
<style scoped>
.group-element {
width: 100%;
min-height: 100px;
max-height: 20000px;
transition: all 0.5s;
}
.fade-group-enter,
.fade-group-leave-to {
opacity: 1;
}
.fade-group-leave-active {
opacity: 0;
position: absolute;
}
</style>
解决方案
试试这个
- 在被动 div 中设置转换属性:
.ele {
background-color: blue;
min-height: 500px;
color: #fff;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
- 让它做一些动画
eleStyle() {
return {
transform: this.gShowSecond ? "translate3d(0, 100px, 0)" : "none",
};
},
分区:
<div class="ele" :style="eleStyle">Prevent this div from jumping<br /></div>
推荐阅读
- youtube - Youtube Analytics API 过滤“不等于”
- html - 如何将子元素(img)的高度赋予父元素(部分)?
- firebase - 在 Google Cloud 上自动生成 API 密钥
- python - ResNet50:TypeError:无法转换类型的对象
张量 - r - ggplot 分组堆积条形图更改刻度标签
- reactjs - 错误不变违规:requireNativeComponent:在 UIManager 中找不到“RNSVGLinearGradient”。IOS React Native
- firebase - 火力基地 | 在functions.pubsub.schedule onRun上获取RemoteConfig值时出错
- dns - 如果 /etc/hosts 有负载均衡器的条目 0.0.0.0/0 将调用哪个 IP
- python - 在 Pandas 中扩展列的所有类别中的缺失值
- vb.net - 值不能为空。(参数'baseName')