如何解决如何为CRUD网站集成类似体验的类型
我正在构建一个Web应用程序，我希望有一个typeform类似的流程可以在我的网站上创建和编辑实体。 据我所知，我不能使用typeform本身，因为它们不允许进行编辑。
是否有工具/代码片段/程序包可以创建美观的表单，而无需在页面之间刷新，包括动画，跳过逻辑等？
我正在将django用于我的网站。
谢谢！
编辑1
尝试使用Barba.js，并且回车过渡出现问题。 退出过渡到可以正常工作，但是由于某种原因，进入过渡不起作用。
新的出现而不会褪色。
HTML测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BarbaJS legacy example</title>
</head>
<body>
{% load static %}
<!-- define the wrapper and the container -->
<div data-barba="wrapper">
<h1>
base base base
</h1>
<div data-barba="container" data-barba-namespace="test-1" id="test">
<h3>
this text should be replaced
</h3>
<a href="/test2">test</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- load barba (UMD version) -->
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>
<script src="{% static "app/js/test.js" %}"></script>
</body>
</html>
HTML测试2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BarbaJS legacy example</title>
</head>
<body>
{% load static %}
<!-- define the wrapper and the container -->
<div data-barba="wrapper">
<h1>
base base base
</h1>
<div data-barba="container" data-barba-namespace="test-1" id="test">
<h3>
New text
New text
New text
</h3>
<a href="/test">test</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- load barba (UMD version) -->
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>
<script src="{% static "app/js/test.js" %}"></script>
</body>
</html>
JS：
$(document).ready(function () {
barba.init({
transitions: [{
leave(data) {
return $(data.current.container).fadeOut().promise()
},enter(data) {
return $(data.next.container).fadeIn().promise()
}
}]
});
});
解决方法
您可以尝试使用Barba.js进行平滑的页面转换，而无需在页面之间刷新：
或者仅使用GreenSock选择动画解决方案来构建表单并对其进行动画处理，以实现Typeform样式表单：
,发生这种情况的原因是因为在HTML 2中；您已将容器默认设置为不透明度1。因此，在加载下一个容器并调用fadeIn()时，它会尝试从1的不透明度变为1。
如果您最初隐藏了容器，则可以淡入容器。
在Barba网站上，旧示例使用GSAP动画，该动画已经在执行上述操作，即将不透明度设置为0，然后设置为1。
请参见下面的示例设置-HTML 1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BarbaJS legacy example</title>
</head>
<body>
<style>
.hidden {
opacity: 0
}
</style>
<!-- define the wrapper and the container -->
<div data-barba="wrapper">
<div data-barba="container" data-barba-namespace="page-a">
<h1>Home</h1>
<a href="/test2.html">Page</a>
</div>
</div>
<!-- load barba (UMD version) -->
<script src="https://unpkg.com/@barba/core"></script>
<!-- load gsap animation library (minified version) -->
<script src="https://unpkg.com/gsap@latest/dist/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</body>
</html>
HTML PAGE 2：
<div data-barba="container" data-barba-namespace="page-b" class="hidden">
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<a href="/">test</a>
</div>
JS：
<script type="text/javascript">
barba.init({
transitions: [{
leave(data) {
return $(data.current.container).fadeOut().promise()
},enter(data) {
return $(data.next.container).fadeTo(400,1).promise()
}
}]
})
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。