Vuejs how do i fade a div

Question

I have to insert some data when I press the insert button to the database and I want to see each row then after one 0.5 sec the div will disappeare. I know the code is wrong is just for example to understand.

    <?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>

and this 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
}

Your code is vulnerable to [**SQL injection**](https://en.wikipedia.org/wiki/SQL_injection) attacks. You should use prepared statements with bound parameters, via either the [**mysqli**](https://secure.php.net/manual/en/mysqli.prepare.php) or [**PDO**](https://secure.php.net/manual/en/pdo.prepared-statements.php) drivers. [**This post**](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) has some good examples. — Alex Howansky, Jul 25 '17 at 17:20
i know but how i fade the div lol in vue i want to apper the disapper 0.5 sec later — Adrian Prime, Jul 25 '17 at 17:22

score 2 · Answer 1 · answered Jul 25 '17 at 17:30

2

You need to use the animation element like so:

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

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

answered Jul 25 '17 at 17:30

Helder Lucas

3,273
2
21
26

it just stand there it doesn't disapear – Adrian Prime Jul 25 '17 at 17:38
have you clicked the button? – Helder Lucas Jul 25 '17 at 17:39
Yes, I see one in the fiddle. The example was just for you to understand the basics now you must to adapt it to your needs. I put the button there just to have an easy way to trigger the animation :) – Helder Lucas Jul 25 '17 at 17:52
I see it now when I load it just stop now i works, thanks – Adrian Prime Jul 25 '17 at 17:54
It's updated. Just click the button to toggle the text – Helder Lucas Jul 25 '17 at 18:08

score -6 · Answer 2 · edited Aug 01 '17 at 00:26

-6

Use jQuery, it has some great built in features for this.

$('#id').fadeOut()

ought to do the trick. You can download jquery here.

edited Aug 01 '17 at 00:26

Sᴀᴍ Onᴇᴌᴀ

8,218
8
36
58

answered Jul 25 '17 at 21:35

user3795412

1

Unless the OP mentioned or tagged jQuery, it is generally best to offer a solution with the libraries mentioned (e.g. VueJS), but then after that you mention jQuery – Sᴀᴍ Onᴇᴌᴀ Aug 01 '17 at 00:27
Since the user asked only for vuejs2, you have to help him with the vuejs solution only. – Anbuselvan Rocky Jul 30 '19 at 06:55

Vuejs how do i fade a div

2 Answers2