Question

我正在使用David Walsh css翻转效果：http://davidwalsh.name/css-flip

我使用名为showCard（）的JavaScript函数进行onClick。请在此处查看codePen： https://codepen.io/Chris_Nielsen/pen/YaWmMe

首次点击该按钮时，它会正确动画（从左向右打开）。但是，当您再次单击该按钮时，它会从右到左关闭动画。第三次单击该按钮，再次打开再次正确动画（从左到右）。

我想要做的是每次从左到右重新打开 。

有人能指出我是如何做到这一点的吗？我已经为此工作了2个小时而且很难过。

守则：

function showCard() {
  document.querySelector("#errorMessage").classList.toggle("flip");
}

body {
  background: #575955;
  color: white;
}
.error-box {
  width: 380px;
  height: 110px;
  background: #fff;
  border: solid 1px #B71C1C;
  border-radius: 9px;
  font-family: 'Raleway', sans-serif;
  font-size: 1.6rem;
  color: #B71C1C;
  text-align: center;
  padding: 30px;
}

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container.flip .flipper {
  visibility: visible;
  transform: rotateY(90deg);
  /* transform: rotateY(90deg); */
}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: .35s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(-90deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

<h1>Click the button below to see the <br>animated alert.</h1>
<div class="flip-container" id="errorMessage" >
    <div class="flipper">
        <!-- text here will rotate --> 
        <div class="front">
            <!-- front content --> 
            <br><br><br>
            <div class="error-box">
                Email address or password <br>
                Incorrect. <br>
                Please Try Again.
            </div>      
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>    
</div>
<input type="button" value="Show card" onClick="showCard();">

Answer 1

我认为这将有助于解释现在代码中的一些内容。简而言之，您已经基于点击时触发的CSS类创建了一个动作。这里要注意的重要部分是此操作基于类的添加。

直观地......你的html看起来像这样（在这里使用替代元素进行简化）。

<element class="class1">some text</element>

然后当您单击该按钮时，这会将HTML标记更改为如下所示......

<element class="class1 class2">some text</element>

反过来，它击中你的css表，现在它会触发你想要的动作...在你的情况下...翻转卡片。

因此，您的卡片在第一次点击时翻转您想要的方向，然后在第二次点击时向后翻转相反方向的原因是因为您只是添加了一个类别，其中说“＆＃34;转向我90度＆＃34;，然后在第二次点击，删除那个告诉你的CSS基本上＆＃34;撤消＆＃34;那一步。

我不确定如果你想继续使用David Walsh编写的即插即用最好的方法，因为它并不是真正的设计来做你正在寻找的东西对于。一种方法可能是添加第二个类，在点击2上完成另一个90度旋转，然后在删除撤消旋转的两个类时隐藏元素。

更新1 - 在此处创建了一个有效的版本... https://codepen.io/SEAjamieD/pen/bvggOw?editors=0110

可能不是那么快就添加和删除类但不太理想但是它有效。您可能会考虑将动画移动到关键帧中。希望这有帮助！

Answer 2

好的，我终于完成了这项工作，以便每次点击按钮时，卡片都会从右向左打开。它结合了@Jamie D的上述关于删除和重新添加类的想法，其中包含使用带有自动重新点击按钮的计时器的jQuery函数的想法。

解决方案可以在codepen上看到： https://codepen.io/Chris_Nielsen/pen/LdWPPG

这是解决方案代码。

＆＃13;

var card = document.querySelector("#errorMessage");
var container = document.querySelector('.flip-container');
var isOpen = false;

function showCard() {
  if (!isOpen) {
    container.style.visibility = "visible";
    card.classList.add("flip");
    document.querySelector(".flipper").classList.toggle("flip");
    isOpen = true;
  } else if (isOpen) { 
    card.classList.toggle("flip");
    isOpen = false;
    clickAgain();
  }
}

function clickAgain(){
  setTimeout(function() {
    $(document).ready(function(){
      $("#b1").click()
    });
  }, 350);
}

＆＃13;

body {
  background: #575955;
  color: white;
}
.error-box {
  width: 380px;
  height: 110px;
  background: #fff;
  border: solid 1px #B71C1C;
  border-radius: 9px;
  font-family: 'Raleway', sans-serif;
  font-size: 1.6rem;
  color: #B71C1C;
  text-align: center;
  padding: 30px;
}

/* Hide the flip container to start */
.flip-container {
	perspective: 1000px;
  visibility: hidden;
}
.flip-container.flip .flipper {
  transform: rotateY(90deg);
  transition: 0.35s;
}

.flip-container, .front, .back {
	width: 320px;
	height: 200px;
}

/* flip speed goes here */
.flipper {
	transition: 0s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(-90deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(90deg);
/*   transform: rotateY(180deg); */
}

＆＃13;

<h1>Click the button below to see the <br>animated alert.</h1>
<div class="flip-container" id="errorMessage" >
  <div class="flipper">
   <!-- text here will rotate --> 
		<div class="front">
			<!-- front content --> 
      <div class="error-box">
      Email address or password <br>
      Incorrect. <br>
      Please Try Again.
      </div>      
		</div>
		<div class="back">
			<!-- back content -->
		</div>
	</div>      
</div>
<input type="button" id="b1" value="Show card" onClick="showCard();">

＆＃13;

每次点击都会重置CSS翻转动画

2 个答案: