CSS - 翻转悬停效果只发生一次

【问题标题】：CSS - Flip Hover effect to happen only onceCSS - 翻转悬停效果只发生一次
【发布时间】：2017-09-25 21:01:53
【问题描述】：

我在一个具有flip-hover 效果的网站中有一个section。客户询问是否可以将flip 限制为从front-to-back 自动翻转一次，然后在光标被移除后back-to-front 以及任何未来的flips 仅由click 发生。基本上，他们不希望动作自动发生，每次站点访问只发生一次。我认为他们在想，如果在用户浏览网站时不断发生这种情况，可能会有点烦人。 这甚至可能吗？如果可以，我该怎么做？

下面是代码 - 

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,800);
body {
  font-family: 'Montserrat', sans-serif !important;
}

#whatwedo {
  width: 100%;
  max-width: 100%;
  height: auto;
}


/* Parallax flipping cards - Codepen */


/* *{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
} */

h1 {
  font-size: 3rem;
  font-family: 'Montserrat';
  font-weight: normal;
  color: #000;
  text-align: center;
  margin: 0;
  padding-bottom: 0px;
}

.container-fluid {
  /* width: 90%; */
  margin: 0px auto;
  /*  max-width: 80rem; */
}

.cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.col-sm-3 {
  /* width: calc(25% - 2rem); */
  /* margin: 1rem; */
  height: 300px;
  width: 300px;
  float: left;
  margin: 0 20px 0 0;
  /* padding: 10px; */
  cursor: pointer;
}

.container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.front,
.back {
  background-size: cover;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  /* size of box */
  min-height: 300px;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  color: #000;
  font-size: 1rem;
}

.back {
  /* background: #fff; 
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%); */
}

.front:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 300px;
  height: 300px;
  content: '';
  display: block;
  /* background shade - was .6 originally */
  opacity: .;
  background-color: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  border: 0px solid;
}

.container:hover .front,
.container:hover .back {
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  font-size 1rem;
  text-align: left;
}

.inner {
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
  z-index: 2;
}

.container .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  /*  -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; */
}

.container .front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  /*   -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; */
}

.container:hover .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  /* -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; */
}

.container:hover .front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  /* -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; */
}

.front .inner p {
  font-size: 3rem;
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after {
  content: '';
  width: 4rem;
  position: absolute;
  background: #000;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: ;
}
<section id="whatwedo">
  <div class="container-fluid">
    <h1>What we do</h1>

    <div class="cols">
      <div class="row">
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Brand Identity</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Graphic Design</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Editorial Design</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Brand Guidelines</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Print Management</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Signage</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Creative Direction</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Illustration & Animation</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

  • 创建一些类并将动画移动到它。通过 JavaScript 删除该类并设置一些类来检查是否发生鼠标悬停
  • 通过JS控制动画。完成后删除悬停属性并将点击事件绑定到它。

标签： html css


【解决方案1】：

这应该可以帮助您入门。

首先适用于悬停。之后点击:) 

var containers = document.querySelectorAll('.container');

containers.forEach(container => {

  container.addEventListener('mouseenter', function() {
    if (!container.classList.contains('flipcomplete')) {
      container.classList.add('flipped');
    }

  });
  container.addEventListener('mouseleave', function() {
    if (!container.classList.contains('flipcomplete')) {
      container.classList.remove('flipped');
      container.classList.add('flipcomplete');

    }
  });
  

container.addEventListener('click', function() {
    container.classList.toggle('flipped');

  });

});
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,800);
body {
  font-family: 'Montserrat', sans-serif !important;
}

#whatwedo {
  width: 100%;
  max-width: 100%;
  height: auto;
}


/* Parallax flipping cards - Codepen */


/* *{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
} */

h1 {
  font-size: 3rem;
  font-family: 'Montserrat';
  font-weight: normal;
  color: #000;
  text-align: center;
  margin: 0;
  padding-bottom: 0px;
}

.container-fluid {
  /* width: 90%; */
  margin: 0px auto;
  /*  max-width: 80rem; */
}

.cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.col-sm-3 {
  /* width: calc(25% - 2rem); */
  /* margin: 1rem; */
  height: 300px;
  width: 300px;
  float: left;
  margin: 0 20px 0 0;
  /* padding: 10px; */
  cursor: pointer;
}

.container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.front,
.back {
  background-size: cover;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  /* size of box */
  min-height: 300px;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  color: #000;
  font-size: 1rem;
}

.back {
  /* background: #fff; 
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%); */
}

.front:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 300px;
  height: 300px;
  content: '';
  display: block;
  /* background shade - was .6 originally */
  opacity: .;
  background-color: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  border: 0px solid;
}

.container:hover .front,
.container:hover .back {
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  font-size 1rem;
  text-align: left;
}

.inner {
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
  z-index: 2;
}

.container .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  /*  -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; */
}

.container .front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  /*   -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; */
}

.container.flipped .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  /* -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; */
}

.container.flipped .front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  /* -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; */
}

.front .inner p {
  font-size: 3rem;
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after {
  content: '';
  width: 4rem;
  position: absolute;
  background: #000;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: ;
}
<section id="whatwedo">
  <div class="container-fluid">
    <h1>What we do</h1>

    <div class="cols">
      <div class="row">
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Brand Identity</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Graphic Design</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Editorial Design</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Brand Guidelines</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Print Management</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Signage</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Creative Direction</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Illustration & Animation</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

【讨论】：

  • 嗨哥们，非常感谢昨天在这里的回答。不过，有趣的是，当我尝试在我的文本编辑器文件中实现时，javascript 不起作用。我在这里做了另一个 Q - stackoverflow.com/q/46406549/3521315 - 你能发现什么可能阻止它吗？
【解决方案2】：

你可能会从Run CSS3 animation only once (at page loading)得到一些信息

我认为仅使用 CSS 是不可能的。您可以添加一些 javacript 以在属性悬停后切换属性并在您的 CSS 中使用它一次。

【讨论】：

    【解决方案3】：

    如果您在使用 jQuery 时没有问题，只需使用“jQuery Flip”库即可。

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2012-05-27
      • 1970-01-01
      • 2015-01-21
      • 1970-01-01
      • 2011-11-21
      • 2011-08-09
      • 2021-05-15
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode