如何整合CRUD网站的类型化体验
如何整合CRUD网站的类型化体验
提问于 2020-08-18 18:15:39
我正在构建一个网络应用程序，我希望有一个型态类似的流，以创建和编辑实体在我的网站。据我所知，我不能使用typeform本身，因为它们不允许编辑。
是否有一个工具/片段/包来创建好看的表单，而不需要在页面之间刷新、包括动画、跳过逻辑等等？
我用django做我的网站。
谢谢!
编辑1
试图使用Barba.js和我对enter转换有一个问题。退出转换工作正常，但由于某种原因，条目转换不起作用。
新的出现并没有褪色。
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>联署材料：
$(document).ready(function () {
barba.init({
transitions: [{
leave(data) {
return $(data.current.container).fadeOut().promise()
},
enter(data) {
return $(data.next.container).fadeIn().promise()
}
}]
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-22 09:53:11
之所以会发生这种情况，是因为在HTML 2中，默认情况下容器设置为1的不透明度。因此，当加载下一个容器并调用fadeIn()时，它试图从1到1的不透明度消失。
如果您最初隐藏容器，那么您将能够淡入容器。
在Barba站点上，遗留示例使用GSAP动画，它已经在执行上述操作，即将不透明度设置为0，然后设置为1。
有关exmaple设置- 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第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>联署材料：
<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>Stack Overflow用户
发布于 2020-08-18 18:40:28
您可以尝试使用Barba.js实现平滑的页面转换，而不需要刷新页面之间的内容：
或选择只使用GreenSock构建和动画窗体的动画解决方案，以实现typeform样式窗体：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63474401
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号