如何为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进行平滑的页面转换，而无需在页面之间刷新：

https://barba.js.org/

或者仅使用GreenSock选择动画解决方案来构建表单并对其进行动画处理，以实现Typeform样式表单：

https://greensock.com/

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

django django-forms html

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

问题描述

解决方法

相关问答