如何解决元素每次在屏幕上更改位置时如何自动为其设置动画?
我有vue项目。
每次由于 v-if 而页面上的某些元素消失时,页面的其余部分都会稍作重新排列。我希望它能顺利进行。
所有元素都具有:key 属性。
示例: 我已将2个框居中对齐。当一个消失时,第二个仍然居中,因此更改位置。 image
如何处理?
编辑1 我尝试过:
<div>
<CompoentA :key=345 class="one-line" v-show="showComponentA" />
<transition name="moving">
<CompoentB class="one-line" :key=123 />
</transition>
</div>
.one-line { display: inline-table; }
.moving-move { transition: transform 1s; }
解决方法
v-if
将从DOM中删除该元素,因此您无法为消失的组件设置动画。
如果要为其设置动画,则应改用v-show
(它们将隐藏在DOM中)。
我认为您需要“ from”和“ to”值来创建此动画。当从DOM中删除元素时,其他元素将基于“内联”位置放置,因此没有用于创建过渡的值引用。 这里有一个类似的问题,其中height:0和height:auto
的过渡How can I transition height: 0; to height: auto; using CSS?
我制作了一个样本来解决这个问题,使用宽度(大于内容)和宽度0(不透明度0)隐藏内部内容。要运行此示例,只需单击项目即可将其“删除”(不透明度0和宽度:0),并且由于设置了初始宽度(80px),过渡效果良好。
new Vue({
el: "#app",data: () => ({
// yes,there is better ways,but let make this sample "simple"
letters: ['a','b','c','d'],visible: {
a: true,b: true,c: true,d: true,}
})
})
#app {
/* decoration,you can remove */
width: 100%;
text-align: center;
background-color: #f4f4f4;
}
.moving {
/* margin and padding 0
because the width content will be set to 0
if this element has a margin,when removed the margin still display the "space"
*/
padding: 0;
margin: 0;
font-size: 0; /* remove white space in DOM element */
display: inline-block;
opacity: 1;
transition: width linear .2s;
/* decoration,you can remove */
width: 80px;
border: 1px dotted #ccc;
cursor: pointer;
}
.moving-content {
font-size: 18px; /* restore font size */
display: inline-block;
/* decoration,you can remove */
background-color: #2af;
color: white;
padding: 20px;
box-sizing: border-box;
}
.moving.hidden {
width: 0px;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="letter in letters"
:key="letter"
:class="{ moving: true,hidden: !visible[letter] }" @click="visible[letter] = false">
<span class="moving-content">
{{ letter }}
</span>
</div>
</div>
参考:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。