6

我试图模仿通常在您有面板的移动设备上发现的效果，当您单击一个按钮时，它会旋转，而在另一侧它有一些其他信息。

我发现了一些使用 css 转换的代码，这是一个示例

js

$('#signup').on('click', function(e) {
    e.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip flip-side-1';
    document.getElementById( 'side-1' ).className = 'flip flip-side-2';

});

$('#create').on('click', function(e) {
    e.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip';
    document.getElementById( 'side-1' ).className = 'flip';

});

这个例子的问题是，如果我将 javascript 转换为 jquery，它会停止工作：

从：

 document.getElementById( 'side-2' ).className = 'flip flip-side-1';

到

$( '#side-2' ).addClass('flip flip-side-1');

我也不确定是否还没有一个 jquery 插件可以更好地做到这一点。

有任何想法吗？

更多的代码。html

<div id="side-1" class="flip">
    <a id="signup" href="#">sign up</a>
</div>
<div id="side-2" class="flip">
    <a id="create" href="#">create</a>
</div>

css

.flip {
    backface-visibility:             hidden;
        -moz-backface-visibility:    hidden;
        -ms-backface-visibility:     hidden;
        -o-backface-visibility:      hidden;
        -webkit-backface-visibility: hidden;
    border: 1px solid black;
    transform-origin:             50% 50% 0px;
        -moz-transform-origin:    50% 50% 0px;
        -ms-transform-origin:     50% 50% 0px;
        -o-transform-origin:      50% 50% 0px;
        -webkit-transform-origin: 50% 50% 0px;
    transition: all 1s;
        -moz-transition:    all 1s;
        -ms-transition:     all 1s;
        -o-transition:      all 1s;
        -webkit-transition: all 1s;
}

#side-1 {
    transform:             rotateY( 0deg );
        -moz-transform:    rotateY( 0deg );
        -ms-transform:     rotateY( 0deg );
        -o-transform:      rotateY( 0deg );
        -webkit-transform: rotateY( 0deg );
}

#side-2 {
    transform:             rotateY( 180deg );
        -moz-transform:    rotateY( 180deg );
        -ms-transform:     rotateY( 180deg );
        -o-transform:      rotateY( 180deg );
        -webkit-transform: rotateY( 180deg );
}

.flip-side-1 {    
    transform:             rotateY( 0deg ) !important;
        -moz-transform:    rotateY( 0deg ) !important;
        -ms-transform:     rotateY( 0deg ) !important;
        -o-transform:      rotateY( 0deg ) !important;
        -webkit-transform: rotateY( 0deg ) !important;
}

.flip-side-2 {
    transform:             rotateY( 180deg ) !important;
        -moz-transform:    rotateY( 180deg ) !important;
        -ms-transform:     rotateY( 180deg ) !important;
        -o-transform:      rotateY( 180deg ) !important;
        -webkit-transform: rotateY( 180deg ) !important;
}

​</p>

4

3 回答 3

8

http://lab.smashup.it/flip/是我为此找到的最好的。

于 2012-04-05T20:39:21.910 回答
1

使用 CSS 变换的好处是它会运行得更快，并且（一旦你不需要将所有样式放在五次中）它会非常优雅。缺点是它根本无法在某些浏览器上运行（即不支持 CSS 转换的旧浏览器）。

就个人而言，我会使用 CSS 转换。随着年龄的增长，您的代码在移动设备上看起来会更好，而不是更糟。

我会大胆猜测您的 jQuery“翻译”失败的原因是现有类没有被翻译后的代码删除，但它们是由纯 JavaScript 删除的，所以：

$('#side-2').removeClass().addClass(' ... ');

如果您查看 jQuery 选项——它们隐藏 div 的内容，然后旋转一个彩色矩形，然后重新填充 div。CSS 方法在起作用时，实际上是起作用的。

于 2012-04-05T20:48:31.007 回答
0

关于当前代码。它没有按您希望的方式工作的原因仅仅是因为在类之间切换时它没有使用任何动画。您可以为此使用 jQuery UI。

此处显示：http: //jqueryui.com/docs/switchClass/

于 2012-04-05T20:45:09.310 回答