Question

我试图基于css动画显示和隐藏div，但是我需要在单击按钮后完全隐藏它，它应该与动画一起发生。

目前它是动画但不隐藏。

这就是我的尝试。

＆＃13;

document.getElementById('toggle').onclick = function(evt) {
  var eSib = evt.target.previousElementSibling.className;
  if(evt.target.previousElementSibling.className.indexOf('slideDown')>=0){
  	evt.target.previousElementSibling.className = 'slideUp';
  }
  else{
  	evt.target.previousElementSibling.className = 'slideDown';
  }
}

＆＃13;

.slideDown{
    animation-name: pullDown;
    -webkit-animation-name: pullDown;

    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;

    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;

    transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
}

@keyframes pullDown {
    0% {
        transform: scaleY(0.1);
    }
    40% {
        transform: scaleY(1.02);
    }
    60% {
        transform: scaleY(0.98);
    }
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(0.98);
    }
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(1);
    }
}

@-webkit-keyframes pullDown {
    0% {
        -webkit-transform: scaleY(0.1);
    }
    40% {
        -webkit-transform: scaleY(1.02);
    }
    60% {
        -webkit-transform: scaleY(0.98);
    }
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(0.98);
    }
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(1);
    }
}

.slideUp{
    animation-name: pullUp;
    -webkit-animation-name: pullUp;

    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;

    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;

    transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
}

@keyframes pullUp {
    0% {
        transform: scaleY(0.98);
    }
    100% {
        transform: scaleY(0);
    }
}

@-webkit-keyframes pullUp {
    0% {
        -webkit-transform: scaleY(0.98);
    }
    100% {
        -webkit-transform: scaleY(0);
    }
}

＆＃13;

<div class="slideDown">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  </ul>
</div>
<button id="toggle">Slide Up/Down</button>

＆＃13;

Answer 1

您可以在animation-fill-mode: forwards;课程中使用.slideUp在动画完成后保持动画的状态。

.slideUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;

animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;

animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;

transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;

animation-fill-mode: forwards;
}

以下是其中的一个小提琴：https://jsfiddle.net/3m353906/

可以在此处找到供应商前缀和更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

Answer 2

使用animation-fill-mode来维持动画的最终状态。

-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;

工作版：

document.getElementById('toggle').onclick = function(evt) {
  var eSib = evt.target.previousElementSibling.className;
  if (evt.target.previousElementSibling.className.indexOf('slideDown') >= 0) {
    evt.target.previousElementSibling.className = 'slideUp';
  } else {
    evt.target.previousElementSibling.className = 'slideDown';
  }
}

.slideDown {
  animation-name: pullDown;
  -webkit-animation-name: pullDown;
  animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
}
@keyframes pullDown {
  0% {
    transform: scaleY(0.1);
  }
  40% {
    transform: scaleY(1.02);
  }
  60% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(1);
  }
}
@-webkit-keyframes pullDown {
  0% {
    -webkit-transform: scaleY(0.1);
  }
  40% {
    -webkit-transform: scaleY(1.02);
  }
  60% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(1);
  }
}
.slideUp {
  animation-name: pullUp;
  -webkit-animation-name: pullUp;
  animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
}
@keyframes pullUp {
  0% {
    transform: scaleY(0.98);
  }
  100% {
    transform: scaleY(0);
  }
}
@-webkit-keyframes pullUp {
  0% {
    -webkit-transform: scaleY(0.98);
  }
  100% {
    -webkit-transform: scaleY(0);
  }
}

<div class="slideDown">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  </ul>
</div>
<button id="toggle">Slide Up/Down</button>

如何在点击动画css时隐藏div

2 个答案: