使用线性梯度（纯CSS）实现动画跷跷板效果

Question

我有一个通过调整线性梯度和高度达到一个对角线的元素 - 在两种不同的状态下。现在我尝试在这些状态之间切换，并平滑过渡红色三角形，这样看起来就像是一个跷跷板:-)问题是，从一个状态到另一个状态它改变方向并且很跳跃，我没有找到一种方法来流利地进行动画制作..有没有一种方法可以让我想要使用纯CSS，例如使用转换？

let btn = document.getElementsByTagName('button')[0]; 
 
let stage = document.getElementById('stage'); 
 

 
btn.addEventListener('click', function() { 
 
    stage.classList.toggle('fixie'); 
 
});

body, 
 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#stage { 
 
    width: 100%; 
 
    height: 14em; 
 
    background: pink; 
 
    padding: 0; 
 
    border: 1px solid blue; 
 
} 
 

 
#stage::before { 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    /*as high as #stage*/ 
 
    opacity: 0.4; 
 
    content: ''; 
 
    z-index: 1; 
 
    background: linear-gradient(to left bottom, red 50%, pink 50%); 
 
    /*transition: height 4s;*/ 
 
    /*transition: linear-gradient 4s 8s;*/ 
 
} 
 

 
#stage.fixie::before { 
 
    height: 30%; 
 
    background: linear-gradient(to right bottom, red 50%, pink 50%); 
 
}

<div id="stage"></div> 
 
<button>animate gradient</button>

这里是我的FIDDLE

Answer 1

正如你不能动画linear-gradient，这里是用transform

在此示例中，我使用skew一种变通方法。由于歪斜的程度会因宽度/高度而有所不同，并且只要其比例保持不变，就会完全响应，否则您需要一个小脚本。

(function(){ 
 
let btn = document.getElementsByTagName('button')[0]; 
 
let stage = document.getElementById('stage'); 
 
    
 
btn.addEventListener('click', function() { 
 
    stage.classList.toggle('fixie'); 
 
}); 
 
})();

body, ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#stage { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 90vw; 
 
    height: calc(90vw * 0.2677);  /* 0.2677, aspect ratio that match skew degree */ 
 
    background: pink; 
 
    padding: 0; 
 
    border: 1px solid blue; 
 
} 
 
.navi { 
 
    width: 100%; 
 
    min-height: 4em; 
 
    height: auto; 
 
    background: green; 
 
    z-index: 2; 
 
    position: relative; 
 
} 
 
#stage::before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; /*as high as #stage*/ 
 
    bottom: 100%; 
 
    opacity: 0.4; 
 
    z-index: 1; 
 
    background: red; 
 
    transform: skewY(15deg); 
 
    transform-origin: left bottom; 
 
    transition: transform 2s; 
 
} 
 
#stage.fixie::before { 
 
    transform: skewY(-15deg) translateY(100%); 
 
} 
 
.navi ul { 
 
    list-style: none; 
 
    display: flex; 
 
    background: lightblue; 
 
    justify-content: flex-end; 
 
} 
 
.navi ul li { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    min-width: 4em; 
 
    width: auto; 
 
    height: 2em; 
 
    margin: 1px; 
 
    background: yellow; 
 
}

<div id="stage"></div> 
 
<button> 
 
animate 
 
</button>

---

边注：

人们可以使用代替vw任何固定值，只要#stage的比保持。如果要更改比例，则需要使用脚本，因为CSS calc无法与sqrt和sin/cos等数学计算角度或使用媒体查询，并为不同屏幕手动设置角度和比率。