Question

我正确呈现了react-boostrap.Modal。在模态中，我有一个按钮，当前正在触发另一个react-boostrap.Modal，效果不是最好的，但我在网站上看到可以翻转模态并渲染＆＃34;在背面模态＆＃34;

我想做的效果就像这样：http://mzabriskie.github.io/react-flipcard/basic/

您知道使用react-boostrap.Modal是否可以获得相同的效果吗？

Answer 1

我一直在寻找相同的效果。我用这种方式解决了

html代码：

<button type="button" class="btn btn-primary" 
data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
 aria-hidden="true">
<div class="modal-dialog" role="document">

    <div class="flip-container">
        <div class="flipper">
            <div class="front">
                <div class="modal-content">
                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <div id="bottom" class="clearfix">

                            My sample text

                            <button class="large-buttons">Click me</button>


                        </div>
                    </div>
                </div>
            </div>
            <div class="back">
                <div class="modal-content">
                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        my sample text on backside
                        <div class="right">
                            <button>
                                back
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
 }

.clearfix:after {
   clear: both;
  }

 .clearfix {
   *zoom: 1;
  }

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
   perspective: 1000;
 }
 /* flip the pane when hovered */
 .flip-container.hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.flip-container, .front, .back {
  width: 100%;
 }

/* flip speed goes here */
.flipper {
 -webkit-transition: 0.6s;
 -webkit-transform-style: preserve-3d;
 -moz-transition: 0.6s;
 -moz-transform-style: preserve-3d;
 -o-transition: 0.6s;
  -o-transform-style: preserve-3d;
 transition: 0.6s;
 transform-style: preserve-3d;
 position: relative;
 }

 /* hide back of pane during swap */
 .front, .back {
  -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateX(0deg);/*fixes a bug in firefox in backface visibility*/
  }

  /* front pane, placed above back */
 .front {
   z-index: 2;
  }

/* back, initially hidden pane */
.back {
   -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
 transform: rotateY(180deg);
 }

JS：

 function flip_dialog(message, html) {

 // fix backstyle
 $('.flip-container .back').height($('.flip-container .front').height());

 // scroll to top
 $(window).scrollTop(0)

 if(html)
    $('.flip-container .back p').html(message);
  else
    $('.flip-container .back p').text(message);


 // then flip that side
 $('.flip-container').addClass('hover');
 $('.flip-container .back button').click(function(){
     $('.flip-container').removeClass('hover');
  });

}

$(function() {
   $('#menu li').click(function() {
      flip_dialog();
  });

  $('.large-buttons').click(function() {
      flip_dialog();
  });

});

代码基于本教程 https://codepen.io/emad_elsaid/pen/iuoDb

但是css中有一个错误，背面可见性不适用于Firefox

Answer 2

您可以使用CSS来实现此效果。这是一个简单的小提琴Flip-card animation，演示了类似的翻转卡片动作。

HTML代码：

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
    <div class="front">
        <!-- front content -->
  <div class="card">
    Front
  </div>
    </div>
    <div class="back">
        <!-- back content -->
  <div class="card">
    Back
  </div>
    </div>
</div>

CSS代码：

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000px;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
  background: white;
    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(0deg);
}

.card {
  background: white;
  border-radius:3px;
  height: 300px;
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

Referred from this link

希望它有所帮助。

React Boostrap模态翻转

2 个答案: