Question

我正在页面中实现'刀片'体验。当我在容器中添加额外的 Blade 时...之前的刀片'弹出'。

问：如何在不影响以前元素的情况下将新元素添加到视图中？

MY FIDDLE：
我创建了一个JSFiddle ...但是该服务目前不可用......我很快就会附加它。

https://jsfiddle.net/PrisonerZ3RO/oynae1hd/4/#

我的CSS：

AppMap

我的HTML：

AppMap

我的JAVASCRIPT：

var issuers = new List<string>()
    {
        "issuerA",
        "issuerB"
    };
// ...
TokenValidationParameters tokenValidationParameters = new TokenValidationParameters
{
    // ...

    ValidateIssuer = true,
    ValidIssuers = issuers

    // ...
};

Answer 1

我以前遇到过这个问题。我发现绕过它的唯一方法是执行以下操作：

1）创建.hidden班级宽度margin-left: -200px

2）将margin-left上的CSS转换添加到.blade类

3）将.hidden类应用于新刀片

4）显示新刀片

5）从新刀片中删除.hidden类

请参阅下面的小提琴，了解有效的解决方案：https://jsfiddle.net/yxL4embt/

Answer 2

如何在不影响先前元素的情况下将新元素追加到视图中？

我不确定我是否完全得到了你所要求的东西，因为当你追加一个新元素时，你总是会通过移动它们来影响其他元素。但是，您可以阻止您看到的弹出效果。 jQuery UI添加的.ui-effects-wrapper为display: block，因此请将以下内容添加到CSS中：

.blade-container .ui-effects-wrapper {
   display: inline-block !important;
}

然后确保您的其他刀片始终与容器顶部对齐：

.blade-container .blade {
  ...
  ...
  vertical-align: top;
}

这将使所有刀片碰到（右）并允许新刀片从左侧滑入。

在没有“弹出”现有容器的情况下将“刀片”附加到容器中

2 个答案: