如何在特定时间触发CSS转换

时间:2019-03-15 12:18:42

标签: javascript html css

例如在19:00:00是否有可能在javascript中触发转换? 并在08:00:00恢复到原来的状态?

白天和黑夜的转换时间是19:00:00,白天和黑夜都需要转换,而晚上08:00:00,我需要从黑夜到白天进行转换

JavaScript

var path = require("path");
var selenium = require('selenium-download');
var binPath = path.join(__dirname, '..', 'bin');

selenium.ensure(binPath, function (error) {
  if (error){
    console.error(error.stack);
  } else {
     console.log('. Selenium & Chromedriver downloaded to:', binPath);
  }  
  process.exit(0);
});

CSS

const getTotalMinutes = ([hours, minutes]) =>
  (hours * 60) + minutes;

const transitionStart = getTotalMinutes([9, 11]);
const transitionEnd = getTotalMinutes([9, 10]);

const getCurrentTransitionState = () => {
  const now = new Date();
  const totalMinutes = getTotalMinutes([
    now.getHours(),
    now.getMinutes(),
  ]);

  const transitionTotal = transitionEnd - transitionStart;
  const timeIntoTransition = totalMinutes - transitionStart;

  if (timeIntoTransition >= transitionTotal) {
    return 1;
  }

  return timeIntoTransition > 0 ?
    timeIntoTransition / transitionTotal :
    0;
}

setInterval(() => {
  const current = getCurrentTransitionState();
  document.getElementById('day').style.opacity = 1 - current;
}, 1000);

HTML

img {
  position: fixed;
  top: 0%;
  left: 0%;
  height: 360px;
  width: 360px;
  transition: all 10s ease;
}

我在javascript中只有这种转换。谁能帮助我,我是新手...我不知道该如何处理这种情况...

0 个答案:

没有答案