transition和hover搭配使用时的技巧

 a {
            position: relative;
            display: block;
            width: 100%;
            height: 191px;
            border-radius: 5px;
            text-decoration: none;
            color: #fff;
            text-align: center;
            padding-top: 20px;
            overflow: hidden;  
            &::after{
                content: '';
                // 双伪元素 必须加content
                position: absolute;
                top: 0;
                right: 136%;
                width: 100%;
                height: 100%;
                transform: skew(45deg);
                background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
                //  transition: all 0.3s;
                  
            }
             &:hover::after{
                transition: all 0.3s;
                right: -136%;
                // 如果将transition放在hover下，只有鼠标移入时才会有过渡效果，鼠标离开元素就不会有过渡效果了，而直接放在&::after伪元素下，不管鼠标移入移出元素，都会对::after伪元素发生改变的属性添加过渡

             }

如果将transition放在hover下，只有鼠标移入时才会有过渡效果，鼠标离开元素就不会有过渡效果了，而直接放在&::after伪元素下，不管鼠标移入移出元素，都会对::after伪元素发生改变的属性添加过渡