Javascript jquery如何做翻转效果？

jquery how to do a flip effect?

提问by Patrioticcow

i am trying to mimic an effect found usually on mobile devices where you have a panel and when u click a button it spins around and on the other side it has some other info.

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

i found some code that usses css transitions and here is an example

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

the js

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';

});

the issue with this example is that if i convert javascript into jquery it stopps working:

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

from:

从：

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

to

到

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

Also im not sure if there isn't already a jquery plugin that does this in a better way.

我也不确定是否已经有一个 jquery 插件以更好的方式做到这一点。

Any ideas?

有任何想法吗？

some more code. html

还有一些代码。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

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;
}

?

?

回答by rncrtr

http://lab.smashup.it/flip/is the best I've found for this.

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

回答by podperson

The upside of using CSS transforms is it will run faster and (once you don't need to put all the styles in five times) it will be very elegant. The downside is that it won't work on some browsers at all (i.e. older browsers with no CSS transform support).

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

Personally, I'd use CSS transforms. Your code will look better with age and on mobile not worse.

就个人而言，我会使用 CSS 转换。你的代码会随着时间的推移看起来更好，在移动设备上不会更糟。

I'll take a wild guess that the reason your jQuery "translation" fails is that existing classes aren't being removed by the translated code, but they are by the pure JavaScript, so:

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

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

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

If you look at the jQuery options -- they hide the content of the div, then rotate a colored rectangle, then refill the div. The CSS method, when it works, actuallyworks.

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

回答by rgin

About the current code. The reason why it's not working the way you want it to simply because it's not using any animation when switching between classes. You can use jQuery UI for that.

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

Shown here: http://jqueryui.com/docs/switchClass/

显示在这里：http: //jqueryui.com/docs/switchClass/