javascript - 将正方形 div 动画化为梯形

Question

如标题所述，我正在尝试使用 jquery .animate() 将方形 div 动画化为梯形。但是，我得到的唯一动画是宽度调整，我不太确定为什么会这样。

$(function () {
    $('.square').hover(function () {
        $(this).animate({
            borderRight: '100px solid red',
            borderTop: '50px solid transparent',
            borderBottom: '50px solid transparent',
            height: '100px',
            width: '0'
        });
    });
});

div.square {
    height: 100px;
    width: 100px;
    background-color: red;
}
div.left {
	border-right: 100px solid red;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	height: 100px;
	width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>


<div class="left"></div>

Answer 1

我会使用类和 css 转换:

$(function () {
    $('.square').hover(function () {
        $(this).removeClass('square').addClass('left');
    });
});

div.square {
    height: 100px;
    width: 100px;
    background-color: red;
}
div.left {
    border-right: 100px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    height: 100px;
    width: 0;
    
    -webkit-transition: all  500ms ease-out;
    -moz-transition: all  500ms ease-out;
    -o-transition: all  500ms ease-out;
    transition: all 500ms ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>