javascript - 将 'Blade' 附加到没有 'popping-down' 现有容器的容器中

Question

我正在页面中实现“ Blade ”体验。当我将一个额外的 Blade 附加到 Container 时......之前的 Blade 会“弹出”。

• 问:如何在不影响先前元素的情况下将新元素添加到 View 中？

我的 fiddle :
我创建了一个 JSFiddle...但该服务目前不可用...我会尽快附加它。

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

我的 CSS:

<style>
    /** DASHBOARD CONTAINER **/
    .dashboard-container { border-right: solid 1px #000; margin-top: 5px; margin-bottom: 5px; overflow-x: scroll; white-space: nowrap; width: 100%; }
    .dashboard-container .widget { clear: both; display: inline-block; vertical-align: top; }

    /** FORM CONTAINER **/
    .form-container { border: 1px solid #ccc; border-radius: 3px; height: 500px; margin-bottom: 5px; padding: 5px; width: 500px; }

    /** BLADE CONTAINER **/
    .blade-container .blade { border: 1px solid #ccc; border-radius: 3px; display: inline-block; height: 506px; margin-right: 2px; padding: 2px; width: 200px; }

</style>

我的 HTML:

<script id="tmplBlade" type="text/template">
    <div class="blade">
        Blade
    </div>
</script>

<div class="dashboard-container">
    <div class="widget">
        <div class="form-container">
            Form Controls go here
            &nbsp;&nbsp;
            <input id="btnAppend" type="button" value="Append Blade" />
        </div>
    </div>
    <div class="widget">
        <div class="blade-container">
        </div>
    </div>
</div>

我的 JAVASCRIPT:

<script type="text/javascript">

$(document).ready(function () {

    function PageController()
    {
        var that = this,
            dictionary = {
                elements: { btnAppend: null, bladeContainer: null },
                selectors: { btnAppend: '#btnAppend', bladeContainer: '.blade-container', tmplBlade: '#tmplBlade' }
            };

        var initialize = function () {

            // Elements
            dictionary.elements.btnAppend = $(dictionary.selectors.btnAppend);
            dictionary.elements.bladeContainer = $(dictionary.selectors.bladeContainer);

            // Events
            dictionary.elements.btnAppend.on('click', that.on.click.btnAppend);
        };

        this.on = {
            click: {
                btnAppend: function (e) {
                    var html = $(dictionary.selectors.tmplBlade).html().trim();
                    var $element = $(html);

                    $element.hide();
                    dictionary.elements.bladeContainer.prepend($element);

                    // Slide-in
                    $element.show('slide', { direction: 'left' });
                }
            }
        };

        initialize();
    }

    var pageController = new PageController();
});

</script>

Answer 1

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

1) 创建一个.hidden类宽度margin-left: -200px

2) 在 margin-left 上添加 CSS transition 到 .blade 类

3) 将.hidden 类应用到新 Blade

4) 展示新 Blade

5) 从新 Blade 中删除.hidden类

请查看您的 fiddle 的以下分支以获得有效的解决方案:https://jsfiddle.net/yxL4embt/