如何为 CRUD 网站集成类似类型的体验答案

【问题标题】：How to integrate a typeform like experience for CRUD website如何为 CRUD 网站集成类似类型的体验
【发布时间】：2020-12-07 23:30:53
【问题描述】：

我正在构建一个网络应用程序，我希望有一个 typeform 类似的流程来在我的网站上创建和编辑实体。据我所知，我不能使用 typeform 本身，因为它们不允许编辑。

是否有工具/sn-p/package 可以创建美观的表单，无需在页面之间刷新，包括动画、跳过逻辑等？

我正在为我的网站使用 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()

      }
    }]
  });
});

【问题讨论】：

标签： html django django-forms

【解决方案1】：

您可以尝试使用 Barba.js 来实现页面之间不刷新的平滑页面转换：

https://barba.js.org/

或者选择只使用GreenSock来构建和动画表单的动画解决方案来实现typeform风格的表单：

https://greensock.com/

【讨论】：

谢谢！使用 barba.js 与使用 Ajax 获取下一页并替换 html 组件的内容有什么优势？
没问题！取决于用例； barba 生命周期更加全面，并且可以使用 beforeLeave、beforeEnter 钩子更轻松地从一个“视图”/页面过渡到下一个“视图”/页面。 Barba使用PJAX，所以不用刷新就可以控制URL；这意味着如果需要，您可以访问浏览器历史记录和后退按钮。预取也更快。但是，根据表单的复杂性，实现简单的 ajax 调用可能需要更长的时间。
我在使用 Barba js 实现时遇到了一些问题。条目转换有效，但条目无效。新的 div 刚刚出现，没有 fadeIn 动画。知道为什么吗？
能否提供测试 2 页面的 HTML 标记？
添加到问题中

【解决方案2】：

发生这种情况的原因是因为在 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 第 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>

【讨论】：

不幸的是它没有解决我的问题。当第二个页面加载时，HTML 2 的不透明度保持为 0。我什至复制并粘贴了您的回复，但没有成功
请看这个例子；使用我提供的代码。您设置的实现可能不正确。请点击链接并单击预览以运行代码，您将看到它正在工作。 plnkr.co/edit/bJUOlO3jyQRka0fp?open=lib%2Fscript.js