javascript - vue 过渡组件无法正常工作
问题描述
你好这是一个简单的代码,但我不知道是什么问题。当我单击父组件上的打开模式时,模式打开但没有过渡,我只是从教程中编写它,在教程中它可以正常工作
<template>
<div class="backdrop" @click="$emit('close')" v-if="open"></div>
<transition name="modal" mode="out-in">
<dialog open v-if="open">
<slot></slot>
</dialog>
</transition>
</template>
<script>
export default {
emits: ['close'],
props:['open']
};
</script>
<style scoped>
.modal-enter-active{
animation: modal 2s linear;
}
.modal-leave-active{
animation: modal 2s linear;
}
@keyframes modal {
from{
opacity: 0;
transform:translateY(-150px) scale(0)
}
to{
opacity: 1;
transform:translateY(0) scale(1)
}
}
</style>
我正在使用 vue 3
解决方案
你真的需要使用 CSS 动画吗?
使用简单的转换怎么样?
.modal-enter-active, .modal-leave-active {
transition: 2s;
transition-timing-function: linear;
}
.modal-enter, .modal-leave-to {
opacity: 0;
transform:translateY(-150px) scale(0);
}
推荐阅读
- scala - df.show() 不打印到文件
- javascript - 如何在 JavaScript 函数中将文本转换为 HTML 并用玩笑对其进行单元测试
- deployment - WIX:属性值不会从发布元素更改
- javascript - 如何删除在全局上下文中定义的声明?
- html - 升级到 iOS 13 后双击缩放不起作用
- mysql - 我如何根据一个条件从一个表的多行中求和值并将求和值插入到mysql中的不同表中?
- javascript - jsxgraph中的线箭头尺寸很小
- python-3.x - 从另一个文件上的函数执行顶层
- java - Spring HandlerMethodSelector.selectMethods 的替代品
- c# - 如何在 blazor 中强制重新渲染 RenderFragment?