主页 / 问题 / 1138918
Accepted
MoloF
Asked:2020-06-10 03:32:00 +0000 UTC2020-06-10 03:32:00 +0000 UTC

VueJS | beforeDestroy 钩子中的组件消失动画

  • 772

片段：

Vue.component('fade-component', {
	template: `<div class="fade-component" ref="container"></div>`,
	mounted() {
		gsap.fromTo(this.$refs.container, {
			autoAlpha: 0
		}, {
			autoAlpha: 1,
			duration: 0.5
		});
	},
	beforeDestroy() {
		// Не работает
		gsap.to(this.$refs.container, {
			autoAlpha: 0
		});
	}
});

new Vue({
	el: "#app",
	data: {
		show: true
	},
	methods: {
		toggleShow() {
			this.show = !this.show;
		}
	}
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

button {
	margin-bottom: 20px;
	border-radius: 4px;
	background-color: #e74c3c;
	border: 0;
	color: #fff;
	font-size: 20px;
	padding: 10px 20px;
	outline: none;
	box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.5);
	transition: box-shadow .1s;
	cursor: pointer;
}

button:active, button:focus {
	box-shadow: 0 0 0 5px rgba(52, 152, 219, 0.5);
}

.fade-component {
	width: 300px;
	height: 300px;
	background-color: #34495e;
	border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
	<button @click="toggleShow">Toggle</button>
	<fade-component v-if="show" />
</div>

有一个项目是组件连接fadeComponent的，组件在其连接阶段出现/消失，组件出现的动画直接位于钩子mounted()中，但是有这样的钩子beforeDestroy()吗？更准确地说，如何beforeDestroy()在删除之前为钩子设置超时？

我尝试了使用transitionand hooks enter/的选项leave，但有必要在v-if里面做transition，但在我的任务中，有必要完全禁用该组件。在这种情况下，块消失有什么选择？

javascript

1 个回答

  1. Best Answer

    对于动画，你不应该使用组件钩子，而应该使用动画钩子。

    如果可能，也建议使用 CSS 动画（例如，在您的情况下，这是更可取的）。由于 CSS 动画是硬件加速的，因此它们的效率更高。

    • 1

相关问题