Question

这可能只是为了愚蠢，但我似乎无法直接思考。

我有这个我想翻转（见http://jsfiddle.net/3Z2KG/1/）。我想用一个按钮翻转它。

ViewModel = function () {
    var self = this;

    self.flipIt = function() {
        //alert("At least this is working!");
        $(this).find('.card').addClass('flipped').click(function () {
            $(this).removeClass('flipped');
        });
        return false;
    }
}

ko.applyBindings(new ViewModel());

我也试过.toggleClass（'翻转'）。但是我没有得到我想要的反应。

Answer 1

通过向flipIt点击功能添加实际业务流程，您将使事情变得更加复杂。我的建议是通过使用中间可观察量跟踪翻转状态来保持离散和不相交。

请查看http://jsfiddle.net/B5TtB/1/以获取更多信息。以下是我建议的重点：

向视图模型添加flipped() observable：self.flipped = ko.observable(false);
向卡片div添加css绑定：<div class="card" data-bind="css: { flipped: flipped() }">
在flipIt函数中，只需将observable的值设置为其布尔逆：

var flipped = self.flipped();
self.flipped(!flipped);

这将在点击时切换班级。不可否认，我无法让其他东西工作（可能是因为我不在webkit浏览器上），但也许这会让你开始。

Answer 2

你遇到了两个问题。首先，this功能中flipIt()是错误的值。在淘汰赛中，通过点击绑定调用的函数将传递两个参数，即实际点击事件的数据和事件对象。你需要将它们传递给你的函数，如：

self.flipIt = function(data, event) {

然后，代替this，您可以使用event.target属性来访问触发click事件的实际DOM元素。

您的第二个问题是使用jQuery选择器来查找实际的.card元素。 find方法搜索元素的后代，但.card元素实际上是<button>兄弟的子元素，所以你需要更像这样的东西：

$(event.target).siblings().find(".card").toggleClass('flipped');

我还删除了第二个单击处理程序，因为我们可以使用jQuery的toggleClass方法来删除类。

我在这里更新了你的小提琴：http://jsfiddle.net/3Z2KG/2/

希望有所帮助！

Answer 3

我会这样做：http://jsfiddle.net/69vTt/7/

示例模板：

<button data-bind="click: toggleFlip">Flip</button>
<div data-bind="css: { 'flipOutY' : isFlipped, 'flipInY': !isFlipped() }" class="animated">
    <h1>Some lovely title</h1>
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

示例视图模型：

function vm(){
    this.isFlipped = ko.observable(false);
    this.toggleFlip = function(){
        this.isFlipped(!this.isFlipped());
    }
}

ko.applyBindings(new vm());

翻转CSS：

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

如何在淘汰赛中切换3D翻转

3 个答案: