vue中用transition标签css动画效果

vue中用transition标签css动画效果

适用与弹出框

<template>
	<transition name="drop-down-transition">
		<!-- div实现动画 -->
		<div v-show="isShow" class="div-box"><div>
	</transition>
</template>
<style>
/*div显示时的动画*/
.drop-down-transition-enter-active {
  animation: transition 0.3s;
}
/*div收起时的动画*/
.drop-down-transition-leave-active {
  animation: transition 0.3s reverse;
}
@keyframes transition {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
</style>

下面这个相对简单,只有个显示隐藏过渡的效果:v-show或v-if控制显示隐藏

<transition name="tool-down">
    <div class="drop-down-container" v-show="dropDownShow">
        <Container>
                    
        </Container>
    </div>
</transition>
<style lang="scss">
.tool-down-enter,
.tool-down-leave-to{
  opacity: 0;
}
.tool-down-enter-active,
.tool-down-leave-active{
  transition: opacity 2s;
}
<style>