关于transition 在:hover状态下设置位置不同导致效果不同的问题

关于transition 在:hover状态下设置位置不同导致效果不同的问题

1. 设置在css类中

	.showcase a{
    width: 270px;
    /* width: 150px; */
    height: 180px;
    background-color: #fff;
    margin: 20px;
    transition:all .3s;
}

– 此时会导致鼠标覆盖时在进入和退出时都会触发动画

2.设置在:hover中

.showcase a:hover{
    transform:translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
    transition:all .3s;
}

– 此时只有鼠标进入元素时才会触发动画