Question

我正在使用animista动画，我想在div块悬停时向左缩放按钮，并且如果我将鼠标移出div块，以使按钮向左缩放。

这是我的代码。

<div class="element">
 <button>
  +
 </button>
</div>

.element {
  background: red;
  height: 20px;
}

.element:hover button {
  display: flex;
    -webkit-animation: scale-in-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: scale-in-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.element button {
  display: none;
    -webkit-animation: scale-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: scale-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
* Generated by Animista on 2018-8-30 14:38:13
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
@-webkit-keyframes scale-in-left{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}@keyframes scale-in-left{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}
@-webkit-keyframes scale-out-left{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}@keyframes scale-out-left{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}

显示：无显示：flex对我来说是必需的。

Answer 1

对于横向扩展动画，您不应给出display: none。它将立即隐藏没有动画的按钮。

相反，您可以使用javascript在特定超时后设置display: none。

Answer 2

您不需要使用display：none属性。不显示；不接受动画属性。

<?php

error_reporting(E_ALL);
ini_set('display_errors', 1);

require __DIR__.'/vendor/autoload.php';

$server = new Flarum\Forum\Server(__DIR__);

$server->listen();

两种动画方式

2 个答案: