Question

我想实现此处显示的淡入淡出和缩放效果： http://tympanus.net/Development/ModalWindowEffects/

但是对于页面（宽度和高度为浏览器的100％）而不是模态。

我怎样才能使用jquery或css？我尝试在页面上复制代码，但它最适用于模式而不是宽度和高度为100％的页面。

页面上的元素最小宽度为1024px。

Answer 1

更新了jsFiddle以显示其中包含至少1024px的元素。

您需要将整个页面放入包装元素，然后在DOM Ready上为其提供动画类。

CSS将类似于：

body,html{
    height:100%;
    margin:0;
}
.page-wrapper{
    height:100%;
    overflow:auto;
    overflow-y:auto;
    overflow-x:hidden;
    transform:scale(0);
    opacity:0;
    transition: transform 1s ease, opacity 1s ease;
}
.page-wrapper.fade-and-scale{
    transform:scale(1);
    opacity:1;
}

jQuery将是这样的：

$(document).ready(function(){
    $('.page-wrapper').addClass('fade-and-scale');
});

此解决方案具有以下好处：

从页面中心“成长”，然后优雅地退回旧浏览器
优雅地退回旧浏览器
不动画任何基本的CSS属性（即宽度或高度）

小提琴：https://jsfiddle.net/gk5c08rc/4/

Answer 2

你的意思是这样吗？

https://jsfiddle.net/rn8ho7wL/

将您的页面包装在一个包装器中，并将较小的（或任何您喜欢的样式 FROM ）设置为该包装器的基本样式。添加transition-duration属性。

#wrapper {
  transition: all 2s;
  -webkit-transition: all 2s;
  width: 10%;
  height: 10%;
  background: red;
  margin: 0 auto;
  opacity: 0;
}

然后，定义一个您希望页面转到 TO 的类。风格相同。

#wrapper.open {
  width: 100%;
  height: 100%;
  opacity: 1;
}

在你的javascript文件中（假设加载了jQuery），只需应用样式。

$(function(){
    $('#wrapper').addClass('open');
});

请记住，IE9及以下版本不支持CSS3过渡，并且还需要一些vendor prefixes在很大程度上兼容。要使用转换，如另一个答案中所述，请应用以下内容：

  -webkit-transform: scale(0); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
  -ms-transform: scale(0); /* IE 9 */
  transform: scale(0);

编辑：

min-width的问题很容易通过将overflow: auto添加到您的包装器元素来解决。

https://jsfiddle.net/rn8ho7wL/2/

淡入缩放效果但适用于页面

2 个答案:

编辑：