vue transition height为0没有看到明显的动画效果
vue transition height为0没有看到明显的动画效果
<template> <div id="app">
<transition name="fade">
<img
v-show="!isHide"
alt="Vue logo"
src="./assets/logo.jpg"
width="25%"
/>
</transition>
<div>
<button @click="hide">测试</button>
</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
hide() {
this.isHide = !this.isHide;
},
},
data() {
return {
isHide: false,
};
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.fade-enter-active,
.fade-leave-active {
transition: height 0.8s;
}
.fade-enter,
.fade-leave-to {
height: 0px;
}
</style>
回答：
有两个问题：
- 第一，你需要赋予transition内组件高度
- 第二，你要将.fade的过渡动画css效果权重提升
（如果代码比较多，以后提问可以贴下在线代码示例）
把代码改了下：在线预览
(如果解决了你的问题可以给个采纳)
<template> <div id="app">
<transition name="fade">
<img
v-show="!isHide"
src="/wp-content/uploads/new2024/02/20240204vue12345/blitz_logo-11cebad97cad4b50bc955cf72f532d1b302.jpg"
alt="vue-img"
id="img"
/>
</transition>
<div>
<button @click="hide">测试</button>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
isHide: false,
};
},
methods: {
hide: function () {
this.isHide = !this.isHide;
},
},
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
/* 首先，需要给transition内的组件赋予高度 */
#img {
width: 100px;
height: 80px;
}
.fade-enter-active,
.fade-leave-active {
transition: height 2s ease-in-out;
}
.fade-enter,
.fade-leave-to {
/* 将高度权重提升 */
height: 0px !important;
/* 以下无效： */
/* height: 0px; */
}
</style>
以上是 vue transition height为0没有看到明显的动画效果 的全部内容， 来源链接： utcz.com/p/937374.html
