1

var c = console.log;
var btnAdd          = document.getElementById('add'),
    textField       = document.getElementById('text_field'),
    tasksContainer  = document.getElementById('tasks_container'),
    dontShow        = true;



btnAdd.addEventListener('click', function() {
    toggle(textField);
});

textField.onkeydown = function(e) {
    if (e.keyCode === 13) {
        addTask(textField.value);
        toggle(textField);
    }
};





function toggle(elem) {
    if (dontShow) {
        elem.style.display = 'block';
        dontShow = false;
    } else {
        elem.style.display = 'none';
        elem.value = '';
        dontShow = true;
    }
}

function addTask(task) {

    var parent  = tasksContainer;
    var newTask = document.createElement('li');
    newTask.classList.add('task');

    newTask.innerHTML = task + '<i class="fa fa-trash delete" aria-hidden="true"></i>';
    parent.appendChild(newTask);

    return function() {

        var successMsg = document.createElement('div');
        successMsg.classList.add('successMsg');
        successMsg.textContent = 'Add New Task';
        document.body.appendChild(successMsg);
        // successMsg.style.opacity = 1;
        return successMsg;

    }();
}
body {
    color: #757575;
    font-family: 'Consolas', Arial, Helvetica, sans-serif;
    margin: 0;
    background: #485563;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #485563, #29323c);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #485563, #29323c);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

ul {
    margin: 0;
    padding: 0;
}

input, textarea {outline:none;}

h1 {
    margin: 0;
    padding: 0;
    color: white;
    font-weight: 100;
    border-radius: 5px 5px 0px 0px;
}

#main_app {
    margin: 6% auto;
    max-width: 860px;
    /*border: 1px solid red;*/
}

#head_app {
    text-align: center;
    background: #272727;
    border-radius: 5px 5px 0px 0px;
    color: white;
    padding: 10px 8px 10px 5px;
    border-bottom: none;
}

#head_app li {
    display: inline-block;
}

#head_app li:last-child { float: right; }
#head_app li:last-child:hover { color: red; }

#add {
    cursor: pointer;
    font-weight: bold;
    font-size: 30px;
}

.input_block {
    width: 100%;
}

#text_field {
    box-sizing: border-box;
    border: none;
    width: 100%;
    background-color: #333;
    color: #fff;
    border-top: none;
    margin: 0;
    padding: 15px 0px 15px 15px;
    font-size: 1em;
    display: none;
}

#tasks_container {
    color: white;
    font-weight: normal;
    width: 100%;
}

#tasks_container li {
    list-style-type: none;
    padding: 15px 0px 15px 15px;
    border-left: 10px solid white;
}

.task {
    background-color:  #F22613;
}

.fa {
    float: right;
    margin-right: 1%;
    cursor: pointer;
}

/*success msg*/
.successMsg {
    position: absolute;
    top: 1%;
    left: 90%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 1%;
    text-align: center;
    opacity: 0;
    /*transition: 1s;*/
}
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To Do js</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="libs/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>

    <!--<div class="successMsg">New Task Added</div>-->

    <div id="main_app">
        <header id="head_app">
            <ul>
                <li><h1>To-Do List</h1></li>
                <li><span id="add">+</span></li>
            </ul>
        </header>
        <input id="text_field" type="text" placeholder="INSERT A NEW TO-DO">

        <ul id="tasks_container">
            <li class="task">Купить зерна<i class="fa fa-trash delete" aria-hidden="true"></i></li>
        </ul>
    </div>

    <script src="scripts/main.js"></script>
</body>
</html>

Не могу сделать так чтобы блок successMsg отображался плавно.Если данный блок предварительно создан, и я меняю свойство opacity, то всё ок.Иначе блок просто резко отображается.Подскажите, что я делаю не так?

3 ответа 3

2

Для того, чтобы сработал transition, нужно перед изменением свойства opacity дать браузеру отрисовать вставленный элемент. Для этого можно воспользоваться функцией setTimeout

Например:

var btnAdd = document.getElementById('add');

btnAdd.addEventListener('click', function() {
  var successMsg = document.createElement('div');
  successMsg.classList.add('successMsg');
  successMsg.textContent = 'Add New Task';
  document.body.appendChild(successMsg);
  setTimeout(() => successMsg.style.opacity = 1);

  successMsg.onclick = function() { // удаляем див
    this.remove();
  }
});
body {
  background-color: #333;
}

#add {
  cursor: pointer;
  color: white;
  font-weight: bold;
  font-size: 30px;
}


/*success msg*/

.successMsg {
  position: absolute;
  top: 1%;
  left: 50%;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 1%;
  text-align: center;
  opacity: 0;
  transition: 1s;
}
<span id="add">+</span>

0

Как вариант: добавить отсрочку выполнения анимации появления на несколько мс:

return function() {
    var successMsg = document.createElement('div');
    successMsg.classList.add('successMsg');
    successMsg.classList.add('hidden');
    successMsg.textContent = 'Add New Task';
    document.body.appendChild(successMsg);
    setTimeout(function() {
        successMsg.classList.remove('hidden');
    }, 10)
    return successMsg;
}

.successMsg {
    position: absolute;
    top: 1%;
    left: 90%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 1%;
    text-align: center;
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

.successMsg.hidden {
   opacity: 0;
}

Кстати, в вашем примере я заменил "style.opacity = " на тугл класса, это более кроссбраузерное решение.

-1

Спасибо все огромное за подсказку, в итоге решил сделать так.

function addTask(task) {

    var parent  = tasksContainer;
    var newTask = document.createElement('li');
    newTask.classList.add('task');

    newTask.innerHTML = task + '<i class="fa fa-trash delete" aria-hidden="true"></i>';
    parent.appendChild(newTask);

    return function() {

        var successMsg = document.createElement('div');
        successMsg.classList.add('successMsg');
        successMsg.textContent = 'Add New Task';
        document.body.appendChild(successMsg);

        displayMsg(successMsg);

    }();

}

function displayMsg(div) {
    setTimeout(function() {
        div.style.opacity = 1;
        setTimeout(function(){
            div.style.opacity = 0;
        }, 2000)
    },10);
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.