使用Vue.js 2.1实现带抖动和翻转动效的弹出式窗口

Flipping Popup Modal

html5, modal, widget

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3223
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

Vue.component('modal', {
    template: `
    <transition name="modal">
      <div class="modal flip-container" :class="{'flip-me': flipMe}">
        <div class="modal__wrapper flipper">
          <div class="modal__container front">
            <div class="modal__header">
              <slot name="front-header"></slot>
              <div class="modal__x" @click="$emit('toggle')">&times;</div>
            </div>
            <div class="modal__body">
              <slot name="front-body"></slot>
            </div>
            <div class="modal__footer">
              <slot name="front-footer"></slot>
            </div>
          </div>
          <div class="modal__container back">
            <div class="modal__header">
              <slot name="back-header"></slot>
              <div class="modal__x" @click="$emit('toggle')">&times;</div>
            </div>
            <div class="modal__body">
              <slot name="back-body"></slot>
            </div>
            <div class="modal__footer">
              <slot name="back-footer"></slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  `,
    props: [
        'flipMe'
    ]
})

new Vue({
    el: 'main',
    data: {
        showModal: true,
        flipMe: false
    },
    methods: {
        toggleModal: function() {
            this.showModal = !this.showModal
        },
        flipModal: function() {
            this.flipMe = !this.flipMe
        }
    }
})

编译

CSS

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.modal__wrapper {
    position: relative;
    width: 65vmin;
    height: 35vmin;
    min-height: 15em;
    min-width: 20em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.modal__container {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #fff;
    color: #333;
    border-radius: .2em;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1em 2em -1em;
}
.modal__header {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1em;
}
.modal__body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 1em;
    overflow: auto;
}
.modal__footer {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    padding: 1em;
}
.modal__footer > * {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.modal__x {
    cursor: pointer;
    font-size: 2em;
    line-height: .5;
}
.button-leave-active,
.modal-enter-active {
    -webkit-transition: -webkit-transform 500ms cubic-bezier(1, 0, 0.2, 1.5);
    transition: -webkit-transform 500ms cubic-bezier(1, 0, 0.2, 1.5);
    transition: transform 500ms cubic-bezier(1, 0, 0.2, 1.5);
    transition: transform 500ms cubic-bezier(1, 0, 0.2, 1.5), -webkit-transform 500ms cubic-bezier(1, 0, 0.2, 1.5);
}
.modal-leave-active,
.button-enter-active {
    -webkit-transition: -webkit-transform 500ms cubic-bezier(1, -0.5, 0.2, 1);
    transition: -webkit-transform 500ms cubic-bezier(1, -0.5, 0.2, 1);
    transition: transform 500ms cubic-bezier(1, -0.5, 0.2, 1);
    transition: transform 500ms cubic-bezier(1, -0.5, 0.2, 1), -webkit-transform 500ms cubic-bezier(1, -0.5, 0.2, 1);
}
.mask-enter-active,
.mask-leave-active {
    -webkit-transition: opacity 300ms linear;
    transition: opacity 300ms linear;
}
.mask-enter,
.mask-leave-to {
    opacity: 0;
}
.button-enter,
.button-leave-to,
.modal-enter,
.modal-leave-to {
    -webkit-transform: scale(0);
    transform: scale(0);
}
.flip-container {
    -webkit-perspective: 900;
    perspective: 900;
}
.flip-container.flip-me .flipper {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.flipper {
    will-change: transform;
    -webkit-transition: -webkit-transform 1000ms cubic-bezier(1, -0.2, 0.2, 1.2);
    transition: -webkit-transform 1000ms cubic-bezier(1, -0.2, 0.2, 1.2);
    transition: transform 1000ms cubic-bezier(1, -0.2, 0.2, 1.2);
    transition: transform 1000ms cubic-bezier(1, -0.2, 0.2, 1.2), -webkit-transform 1000ms cubic-bezier(1, -0.2, 0.2, 1.2);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}
.flipper .front,
.flipper .back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.flipper .front {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.flipper .back {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
[v-cloak] {
    display: none !important;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: sans-serif;
    background: #21c2f5;
    color: #fff;
}
button {
    border: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2) inset;
    padding: .7em 1em;
    border-radius: .35em;
    color: #fff;
    font: inherit;
    background: #333;
    cursor: pointer;
    outline: none;
    will-change: transform;
    -webkit-transition: -webkit-transform .2s ease-out;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}
button:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

HTML

<modal v-if="showModal" :flip-me="flipMe" @toggle="toggleModal()">
        <div slot="front-header">
            <b>Gimme the Keys</b>
        </div>
        <div slot="front-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur quia totam velit amet porro libero ab blanditiis fugiat repudiandae, aperiam, quod ut odit cumque eos modi doloremque laborum delectus commodi!
        </div>
        <div slot="front-footer">
            <button @click="flipModal()"><i class="fa fa-arrow-right"></i>
            </button>
            
        </div>
        <div slot="back-header">
            <b>Flip You Fo Real!</b>
        </div>
        <div slot="back-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis necessitatibus cumque, quaerat sunt, aliquam, officia ut delectus explicabo laborum distinctio totam tempore debitis. Error odio quidem cupiditate, harum, similique laboriosam.
        </div>
        <div slot="back-footer">
            <button @click="toggleModal()">Done</button>
            <button @click="flipModal()"><i class="fa fa-arrow-left"></i>
            </button>
        </div>
    </modal>

</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script>

Flipping Popup Modal

html5, modal, widget

编辑器支持Emmet

快捷键

Flipping Popup Modal

html5, modal, widget

使用Vue.js实现的一款很棒的图文卡片反应式悬停动效

使用Perlin.js和Vector2.js实现的粒子流动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：