Question

当我按下插入按钮到数据库时我必须插入一些数据，我想看到每一行然后在一个0.5秒后div将消失。我知道代码错误仅仅是为了理解。

    <?php

    $contents = file_get_contents("foo.txt.001");
    $pollfields = explode(',', $contents);

    foreach ($pollfields as $key) {

                $sql = "INSERT INTO keywords (`keys`) VALUES ('".$key."')";
                if ($conn->query($sql) === TRUE) {

 <div v-if="show" transition="fade" >
        <div class="alert alert-success" role="alert">
         <strong>$key</strong>
     </div>
    </div>
                echo ;
            } else {
                echo "Error: " . $sql . "<br>" . $conn->error;
            }
    }

    ?>
<script> new Vue({ el: '#demo', data: { show: true } }) </script>

和这个css：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */     {
  opacity: 0
}

Answer 1

您需要使用animation元素，如下所示：

<transition name="fade">
    <div v-if="show">
     // content to be animated
    </div>
</transition>

https://jsbin.com/laxoqo/edit?html,js,output

Answer 2

使用jQuery，它有一些很棒的内置功能。</ p>

$('#id').fadeOut()

应该做的伎俩。您可以下载jquery here。

Vuejs我如何淡化div

2 个答案: