HTML5 Popmotion.js实现的弹窗控件

弹窗控件实现了内置按钮和蹲跳动画。

h5, popup, window

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const { css, transform, chain, delay, tween, easing, parallel } = window.popmotion;
const { interpolate } = transform;

let trigger;
let isClosing = false;

// Select DOM
const modalTriggersDom = document.querySelectorAll('.modal-trigger');
const dimmer = document.querySelector('.overlay');
const modalContainer = document.querySelector('.modal-container');
const modal = document.querySelector('.modal');

// Create CSS renderers
const dimmerRenderer = css(dimmer);
const modalContainerRenderer = css(modalContainer);
const modalRenderer = css(modal);

// Return the center x, y of a bounding box
function findCenter({ top, left, height, width }) {
  return {
    x: left + (width / 2),
    y: top + (height / 2)
  };
}

/*
  Generate a function that will take a progress value (0 - 1)
  and use that to tween the modal from the source to the destination
  bounding boxes
*/
const vRange = [0, 1];
function generateModalTweener(sourceBBox, destinationBBox) {
  const sourceCenter = findCenter(sourceBBox);
  const destinationCenter = findCenter(destinationBBox);

const toX = interpolate(vRange, [sourceCenter.x - destinationCenter.x, 0]);
  const toY = interpolate(vRange, [sourceCenter.y - destinationCenter.y, 0]);
  const toScaleX = interpolate(vRange, [sourceBBox.width / destinationBBox.width, 1]);
  const toScaleY = interpolate(vRange, [sourceBBox.height / destinationBBox.height, 1]);

return (v) => modalRenderer.set({
    opacity: v,
    x: toX(v),
    y: toY(v),
    scaleX: toScaleX(v),
    scaleY: toScaleY(v)
  });
}

function openModal(e) {
  if (e.target && e.target.classList.contains('modal-trigger')) {
    trigger = e.target;
    
    // Get bounding box of triggering element
    const triggerBBox = trigger.getBoundingClientRect();
    
    // Temporarily show modal container to measure modal
    dimmerRenderer.set('display', 'block').render();
    modalContainerRenderer.set('display', 'flex').render();
    modalRenderer.set('opacity', 0).render();
    
    // Get bounding box of final modal position
    const modalBBox = modal.getBoundingClientRect();

// Get a function to tween the modal from the trigger
    const modalTweener = generateModalTweener(triggerBBox, modalBBox);
    
    // Fade in overlay
    tween({
      duration: 200,
      onUpdate: (v) => dimmerRenderer.set('opacity', v)
    }).start();
    
    chain([
      delay(75),
      tween({
        duration: 200,
        ease: easing.easeOut,
        onUpdate: modalTweener
      })
    ]).start();
  }
}

function closeComplete() {
  isClosing = false;
  dimmerRenderer.set('display', 'none').render();
  modalContainerRenderer.set('display', 'none').render();
  modalRenderer.set({
    y: 0,
    scaleX: 1,
    scaleY: 1,
    transformOrigin: '50% 50%'
  });
}

function submitModal(e) {
  if (isClosing) return;
  e.stopPropagation();
  
  isClosing = true;
  
  const toScaleXIn = interpolate(vRange, [1, 1.2]);
  const toScaleYIn = interpolate(vRange, [1, 0.8]);

document.addEventListener('click', openModal);
document.addEventListener('click', cancelModal);
document.querySelector('.submit').addEventListener('click', submitModal);

编译

CSS

body {
    --pink: #ED2754;
    background: #111;
    color: #eee;
    font-family: 'Source Sans Pro', sans-serif;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
button {
    outline: none;
    padding: 20px;
    -webkit-appearance: none;
    background: white;
    border: none;
}
.pen {
    flex: 1 1 100%;
}
.created-by {
    flex: 0 0 50px;
    color: #eee;
    text-decoration: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 30px;
    border-top: 1px solid var(--pink);
}
.logo {
    margin-left: 10px;
}
.controls {
    display: flex;
    flex-direction: column;
    width: 200px;
    height: 100%;
    min-height: 400px;
    margin: 0 auto;
    justify-content: space-around;
}
.controls button {
    margin: 20px;
}
.modal-container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: none;
    justify-content: center;
    align-items: center;
}
.overlay {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateZ(0);
}
.modal {
    background: #fff;
    border-radius: 10px;
    width: 300px;
    height: 250px;
    display: flex;
    align-items: flex-end;
}
.modal footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.modal button {
    border: none;
    border-radius: 5px;
    padding: 25px 50px;
    margin: 0 10px 10px 0;
}
.submit {
    background: #8CDA26;
}
.cancel {
    background: #DA2632;
}

HTML

弹窗控件实现了内置按钮和蹲跳动画。

h5, popup, window

编辑器支持Emmet

快捷键

弹窗控件实现了内置按钮和蹲跳动画。

h5, popup, window

HTML5 Bodymovin.js + Anime.js实现很有趣的骑自行车动画

HTML5基于Anime.js实现的SVG矢量图变形动画 - 地标切换

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：