在方向更改时禁用 css 动画

Posted 2023-03-12

【中文标题】在方向更改时禁用 css 动画

【英文标题】：Disable css animation on orientation change

【发布时间】：2015-11-20 11:56:30

【问题描述】：

所以我使用 css 动画和媒体查询为平板电脑制作了两个动画。

动画的主要作用是在平板电脑纵向中从上到中为 div 设置动画，在平板电脑横向中从左到中设置动画。

当页面以纵向加载时，它会正确地从上到中进行动画处理。但是当方向更改为横向时，它会从左到中启动第二个动画。如果它首先是横向的，则相同。

我想要的是动画在页面加载时只运行一次，而不是在每次方向改变时触发。

最好没有javascript，只有css。

这里有一些代码说明它是如何工作的：

@keyframes leftToCenter 
  from 
    margin-left: -100vw;
  
  to 
    margin-left: 0;
  

@keyframes topToCenter 
  from 
    margin-top: -100vh;
  
  to 
    margin-top: 0;
  

@media only screen and (orientation: portrait) 
  .div 
    animation-name: topToCenter;
    animation-duration: 1s;
  

@media only screen and (orientation: landscape) 
  .div 
    animation-name: leftToCenter;
    animation-duration: 1s;
  

编辑：

动画一定不能用jQuery，只能用css动画。这是要求。

另外，动画有点复杂，我这里放了最简单的版本。

主要是它只在页面加载时运行，而不是在方向改变时运行。

【参考方案1】：

我能想到的在纯 CSS 中做到这一点的唯一方法是使用单个动画。

这样浏览器就认为动画已经结束了，不会再触发了。

在一个方向上，我们将使用一半的动画，从中间开始，到最后结束。

在另一个方向上，我们也会从中间开始，但是我们会反过来执行它并在他开始时结束

@keyframes dual 
  from 
    margin-left: 0;
  
  49.9% 
    margin-left: -100vw;
    margin-top: 0;
  
  50% 
    margin-left: 0;
    margin-top: -100vh;
  
  to 
    margin-top: 0;
  

@media only screen and (orientation: portrait) 
  .element 
    animation-name: dual;
    animation-duration: 2s;
    animation-delay: -1s;
  

@media only screen and (orientation: landscape) 
  .element 
    animation-name: dual;
    animation-duration: 2s;
    animation-delay: -1s;
    animation-direction: reverse;
  


.element 
  width: 100px;
  height: 100px;
  background-color: lightblue;

<div class="element"></div>

【参考方案2】：

如果有人感兴趣，我找到了解决这个问题的另一种方法。

您必须在媒体查询中移动关键帧声明并为其命名。这样，在需要时仍会触发正确的动画，并且由于它们具有相同的名称，动画计数将在第一个动画后增加到 1，并且在方向更改后不会再次触发。

@media only screen and (orientation: portrait) 
@keyframes animation
  from 
    margin-top: -100vh;
  
  to 
    margin-top: 0;
  
  
.div 
    animation-name: animation;
    animation-duration: 1s;
  

@media only screen and (orientation: landscape) 
@keyframes animation
  from 
    margin-left: -100vw;
  
  to 
    margin-left: 0;
  

  .div 
    animation-name: animation;
    animation-duration: 1s;
  

【讨论】：

这是迄今为止我见过的最干净的解决方案。

【参考方案3】：

可能有一种 CSS 方法可以做到这一点，但使用 jQuery 创建效果非常容易：

$(document).ready( function()
 $('#yourdiv').show().animate(top:'50%',1000);
);

以这种方式设置#yourdiv的样式，以便在绝对位置时居中：

    display: none;
    position: absolute;
    z-index: 100000; /* on top of all others element */
    top: -50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

只有在页面刷新时才会出现效果。

您甚至可以添加另一个名为 shadow 的 div 以使其更好看:)

【讨论】：

动画不能用jQuery，只能用css动画。这是要求。但无论如何，tnx。另外，动画有点复杂，我在这里放了最简单的版本。主要的是它只在页面加载时运行，而不是在方向更改时运行。