下降区内的CSS3过渡

CSS3 transition within dropzone

本文关键字：CSS3 过渡 降区      更新时间：2023-09-26

在Dropzone表单中的dz-message元素中有两个元素。一个隐藏在视线之外（使用overflow:hidden），另一个可见。

当表单获得dz-drag-hover类时，当使用CSS转换向上移动dz-message元素时，第二个元素变得可见。

这是原位液滴区元件的结构：

<form class="new-album-dropzone" id="albumDropzone">
    <div class="dz-message">
        <div class="dz-message-empty">
            <div>
                <p>The best way to create collaborative image collections.<br/>No account required.</p>
                <p class="instruction">Drop in some images to get started.</p>
                <p>Or <a href="/sign-in" class="signInModalLink">click here to sign in</a>.</p>
            </div>
        </div>
        <div class="dz-message-hovered">
            <div>
                <p><span class="instruction">Drop it</span> like it's hot</p>
            </div>
        </div>
    </div>
</form>

看到dz-message-hovered和dz-message-empty元素中的<div>了吗？当光标最终进入他们的身体时，它会导致dropzone认为dragend已经发生。这意味着dz-drag-hover类从表单中删除，dz-message元素开始向下转换。

我制作了一个视频来帮助演示我的意思：http://quick.as/7OYPiG4Q1-看看当内部元素被拖动时它是如何闪烁的？

在不分叉dropzone的情况下，有什么简单的方法可以防止dropzone认为我已经完成拖动了吗？

我想出了一个解决方案！

我使用常规Dropzone选项（不需要黑客攻击！）覆盖了dragend和dragleave函数，以检查鼠标事件是否发生在Dropzone表单元素的边界之外。它看起来有点像：

    this.dropzone = new Dropzone(this.$('#albumDropzone')[0], {
        ... other options ...
        dragend: function(e) {
            if (mouseEventOutside(e, $(this.element))) {
                return this.element.classList.remove('dz-drag-hover');
            }
        },
        dragleave: function(e) {
            if (mouseEventOutside(e, $(this.element))) {
                return this.element.classList.remove('dz-drag-hover');
            }
        }
    });

为了处理当我将鼠标悬停在下部元素上时发生的闪烁，好吧，每当dragenter发生时，这种情况就会发生变化，我用dragenter事件回调引起了这种情况。我只是在那里检查输入的元素是否是dz-message元素，如果是，它不会做任何导致闪烁的事情。使用正则表达式完成：if (/dz-message/g.test(e.toElement.className)) { }。

感谢所有花时间阅读的人：）我希望这能有所帮助。

相关文章：