javascript - CSS 中的滑动门动画，如 Twitter 通知

Question

我正在尝试模仿 Twitter 的通知 动画

---

---

这是我到目前为止想出的:

$('button').click(function() {
  $('#left').css('width', '400px');
  $('#right').css('width', '400px');  
});

.wrapper {
  position: relative;
  min-height: 50px;
}

.left {
  position: absolute;
  left: 0;
  height: 50px;
  background: #00AEEF;
}

.right {
  position: absolute;
  right: 0;
  height: 50px;
  background: #00AEEF;
}

.banner {
  width: 0%;
  overflow: hidden;
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="wrapper">
    <div id="left" class="banner left"></div>
    <div id="right" class="banner right"></div>
  </div>
  <div style="margin: 10px;">
    <button>start animation</button>
  </div>
</div>

但是为左右动画使用 2 个不同的 div 感觉就像是 hack。

是否有更好的那种类型的内置 css 动画(用于单个 div)？

Answer 1

滑动门效果(仅)

(完整效果演示见下文)

您可以为 background-position 设置动画两个linear-gradients放置在单个元素中(因此您甚至不需要再使用两个空元素来进行样式设置)例如

div {
   background: 
       linear-gradient(to left, #00AEEF 50%, transparent 0),
       linear-gradient(to right, #00AEEF 50%, transparent 0);
   background-position: 50vw 0, -50vw 0;
   background-repeat: no-repeat;
   height: 50px;
   transition: background-position 1s;
}

:checked + div {
    background-position: 0 0, 0 0;
}

---

只需通过 js 设置一个类触发转换(为了简单起见，我用 :checked 伪类激活了效果)

Codepen demo

---

您也可以通过相反的动画获得相同的效果:如果您在蓝色 background-color 上放置白色渐变你可以只为 background-size 设置动画像这样的渐变

div {
   background: #00AEEF linear-gradient(to right, #fff, #fff);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 50px;
    transition: background-size 1s;
}

:checked ~ div {  background-size: 0 100%; }

Codepen demo

---

Comparing the two approaches我个人更喜欢最后一个(更少的代码输入，一个单一的渐变动画，看起来更平滑。此外，第二个演示防止了第一个演示中有时会发生的烦人的舍入问题，当重新定位两个渐变时，当你从下面的截图可以看出)

---

完整效果(包含所有动画/过渡)

要重新创建此通知的完整效果，标记和样式当然应该略有更改:从上一个演示开始，我将主要效果移到了 <a> 上。包装器内的元素，我插入了其他效果，如 @带有动画的脉动，并在 5 秒后最后滑下。

右箭头由unicode符号U+3009构成它被放置为 content的 a::after伪元素

注意:所有属性都是无前缀。必要时添加前缀

Codepen Demo (Full effect)

标记

<div class="notification">
  <a href="#"><span>@</span>Miro mentioned you</a>
</div>

CSS (从谷歌字体嵌入 Lato 字体)

* {
  font         : 1rem "Lato", Arial;
  box-sizing   : border-box;
}

.notification {
   position     : relative;
   overflow     : hidden;
   font-weight  : 100;
   font-size    : 1.5rem;
}

.notification a {
    display     : block;
    padding     : 1em 3em 1em 2.25em;
    width       : 100%;
    font-size   : inherit;
    font-weight : inherit;
    color       : transparent; 
    background  : #00AEEF linear-gradient(to right, #fff, #fff);
    text-decoration : none;    
    background-position : 50% 0;
    background-repeat   : no-repeat;
    background-size     : 100% 100%;
}

/* The at-sign: I've also tried to use :first-letter but it
 * is unreliable when the first char is not a letter or a digit
 */
.notification a span { 
    position    : absolute; 
    line-height : 1;
    top         : 50%; 
    left        : 50%;
    color       : #fff; 
    font-weight : bold;
    transform   : translate(-50%, -50%) scale(0);
    transform-origin : 50% 50%;
}

/* The arrow */
.notification a:after {
   position  : absolute;
   content   : "\3009";
   right     : 1em;
   top       : 50%;
   transform : translateY(-50%);  
}


/* sliding doors effect, color change and final slide down
 * all with proper delays 
 */
:checked ~ .notification a {  
  transition: background-size .2s, color .33s 1s, transform 1s 5s;
  transform: translateY(100%);
  background-size: 0 100%; 
  color: #fff;
}

/* pulsing and moving the @-sign */
:checked ~ .notification a span {
  animation: pulse-at .66s ease-in-out .33s forwards;
}


@keyframes pulse-at {
    0%   { transform: scale(0)   translate(-50%, -50%); }
    20%  { transform: scale(1.1) translate(-50%, -50%); }
    25%  { transform: scale(1)   translate(-50%, -50%); }
    40%  { transform: scale(1)   translate(-50%, -50%); left: 50%; }
    100% { transform: scale(1)   translate(0, -50%);    left: 1em; }
}

---

最终结果