Переход на динамически создаваемый элемент HTML5. Как определить в Javascript?

Question

Я создаю новый <div> с помощью метода onclick кнопки. Идея заключается в том, что на экране появляется карта, которая может быть обработана несколькими действиями. Код HTML5 для кнопки следующий.

<input type="submit" class="transition_submit" value="Transition" onclick="card_AppearsHome()"> 

Чтобы динамически создать карту, я добавил файл JavaScript. Я использую переменную transition_counter для отслеживания состояния карты, похожую на «показать / скрыть».

function card_AppearsHome() {    

if (transition_counter == 1){

    document.getElementById("white_background_top").removeChild(home_card);
    transition_counter = 0;
}

else {

    //card/ div is created and appears, need to select a tranform: transition method 
    //probeer hier JQuery te gebruiken, dit is veel minder code 
    home_card = document.createElement('div');
    home_card.id = "home_card";
    home_card.style.position = "relative";
    home_card.style.width = "20vw";
    home_card.style.height = "20vh";
    home_card.style.left = "54vw";
    home_card.style.top = "25vh";
    home_card.style.background = "#000";
    document.getElementById("white_background_top").appendChild(home_card);

    transition_counter = 1;
}
}

Это создает и удаляет карту путем нажатия на кнопку. Теперь я хочу определить входящие и исходящие эффекты перехода на карту. У меня есть некоторые трудности с поиском документации о том, как определить эти эффекты перехода в файле JavaScript для вновь созданного элемента.

Что мне делать?

Если вы можете просто указать мне правильное направление, эффект не важен, знаете, мне просто нужно знать, как получить доступ к методу перехода с этого момента ...

Answer 1

Под входящими и исходящими эффектами перехода вы подразумеваете анимацию, когда она скользит, а затем скользит?

Если это так, вы, вероятно, можете использовать в первую очередь CSS для этого.Возможная документация: CSS & Использование в JavaScript (посмотрите на левой панели, там больше страниц. Я только что связал две основные)

---

Вы также можете посмотреть только CSS-анимации, а затем просто вызывать анимацию через JavaScript всякий раз, когда она создается и закрывается.Документация по CSS-анимациям здесь

И чтобы вызвать анимацию, вы должны иметь возможность просто добавить класс к объекту, и тогда он выполнит анимацию, а затем удалит класс позже, когдаанимация выполнена.

Извините за отсутствие примеров кода, меня сейчас нет дома.Если вам что-то понадобится, я, возможно, смогу попробовать создать JSFiddle или что-то для вас, когда смогу.

Answer 2

Я использовал решение ClassName для решения проблемы и переместил большую часть кода стиля в CSS. Итак, новый код Javascript это ..

function card_AppearsHome() {


if (transition_counter == 1){

    document.getElementById("white_background_top").removeChild(home_card);
    transition_counter = 0;
}

else {

    //card/ div is created and appears, need to select a tranform: transition method 
    home_card = document.createElement('div');
    home_card.id = "home_card";
    home_card.className = "homecard_appear"

    console.log(home_card.id);

    document.getElementById("white_background_top").appendChild(home_card);

    transition_counter = 1;
}
}

Мой код в CSS выглядит следующим образом .. Я также добавил анимацию входа, просто чтобы проверить это ..

/* Markup for the card created dynamically */
#home_card{
position : relative;
width: 20vw;
height : 20vh;
left : 54vw;
top : 25vh;
background-color: #000;
}

/* card appearing effect */
.homecard_appear{
animation-name: card_appear;
animation-duration: 4s;
}

/* standard transition */
@keyframes card_appear {
from {left: 54vw;}
to {left: 94vw;}
}

/* Safari 4.0 - 8.0 transition */
@-webkit-keyframes card_appear {
from {left: 54vw;}
to {left: 94vw;}
}

Спасибо за вашу помощь!