神奇的css

1.多行文本省略失效

说明：
使用多行文本显示省略号样式时，-webkit-box-orient: vertical;会被浏览器自动过滤。

解决方案
用注释打开autoprefixer属性，然后关闭。如下：

.line-ellipsis-2{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
 /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

这样的写法在webpack中会有个错误提示，可以修改为如下格式：
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;

2.animation与display不兼容

animation-fill-mode: forwards;可以让动画保持结束时的样子。
但是如果我们想要一个动画结束时隐藏元素怎么办，有人或说在动画结束时设置display:none;
很遗憾，display:none会导致dom树的重新构建而animation属性的渲染会在dom构建完成后，重新渲染。所以display:none和animation是相冲突的，一旦dom不存在了，那么也就无法渲染了，要想拥有渲染效果，那么渲染的dom就必须存在。

那么怎么解决这个问题呢?
有2种解决方案：
既然dom无法不存在，那么只能考虑opacity:0;或者visibility: hidden;
如果不介意元素占位影响的话这样做就足够了。
如果希望最后元素不占位，不好意思办不到。但是我们可以变相的处理，设置元素绝对定位，然后设置z-index足够小，这样元素始终在最底层，并不影响暂时效果，视觉上仿佛真的不存在一样。
例如：

.guideDisplay {
        position: absolute;
        background: #fff;
        z-index: 100;
        opacity: 0.9;
        animation: outGuide 1s linear;
        animation-fill-mode: forwards;    
}

@keyframes outGuide {
        0% {
            top: 60px;
            right: 50px;
            opacity: 1;
        }

        50% {
            top: 45px;
            right: 45px;
            opacity: 0.5;
        }

        100% {
            top: 30px;
            right: 40px;
            opacity: 0;
            z-index:-1;
        }
    }

这是一个简单的淡出效果，可以看出最后我们通过z-index:-1;变相的实现display:none效果。对于css而言，实现的方法有很多种，我们一定要了解不同css的相互转换，这样才能更加灵活的应对各种业务的需求。

3.less中使用css的calc冲突

在css中我们使用clac(100%-200px)可以被正确的计算并解析未准确宽度，但是在less中这样写的话则不能被正确解析。
因为less的计算方式和css的计算方式相冲突了。
解决方法如下：

width: calc(~"100% - 200px");

将计算公式用引号包裹起来，然后在前面添加~。